-
Notifications
You must be signed in to change notification settings - Fork 84
Description
Version: last from master
Problem: values not selected with attribute data-selected for others seletcs, and change in one component modify value in first
Add manualy event listener for selects not help me
Code
<div class="mdl-grid">
<form id="general-form" method="post" action="/example">
<!-- first select in form -->
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield getmdl-select">
<input class="mdl-textfield__input" value="" id="firstSelect" readonly/>
<input value="" type="hidden" name="firstSelect"/>
<label class="mdl-textfield__label" for="firstSelect"> First Select </label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="firstSelect">
<li class="mdl-menu__item" data-val="1" data-selected="true"> Item #1</li>
<li class="mdl-menu__item" data-val="2"> Item #2</li>
<li class="mdl-menu__item" data-val="3"> Item #3</li>
</ul>
</div>
</div>
<!-- other selects with input -->
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="input1"> Input one</label>
<input type="text" class="mdl-textfield__input"
id="input1" name="input[1]"
value="Example input 1">
</div>
<div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield getmdl-select">
<input class="mdl-textfield__input" value="" id="select1" readonly/>
<input value="" type="hidden" name="select1"/>
<label class="mdl-textfield__label" for="select1"> Select 1 </label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="select1">
<li class="mdl-menu__item" data-val="1"> Item #1</li>
<li class="mdl-menu__item" data-val="2" data-selected="true"> Item #2</li>
<li class="mdl-menu__item" data-val="3"> Item #3</li>
</ul>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="input2"> Input two</label>
<input type="text" class="mdl-textfield__input"
id="input2" name="input[2]"
value="Example input 2">
</div>
<div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield getmdl-select">
<input class="mdl-textfield__input" value="" id="select2" readonly/>
<input value="" type="hidden" name="select2"/>
<label class="mdl-textfield__label" for="select2"> Select 2 </label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="select2">
<li class="mdl-menu__item" data-val="1"> Item #1</li>
<li class="mdl-menu__item" data-val="2"> Item #2</li>
<li class="mdl-menu__item" data-val="3" data-selected="true"> Item #3</li>
</ul>
</div>
</div>
</form>
</div>Error in developers console:
Uncaught TypeError: Cannot read property 'change' of undefined
at setSelectedItem (getmdl-select.js:33)
at getmdl-select.js:177
at NodeList.forEach ()
at Object._addEventListeners (getmdl-select.js:161)
at getmdl-select.js:184
at NodeList.forEach ()
at Object.init (getmdl-select.js:183)
at whenLoaded (getmdl-select.js:5)
setSelectedItem @ getmdl-select.js:33
(anonymous) @ getmdl-select.js:177
_addEventListeners @ getmdl-select.js:161
(anonymous) @ getmdl-select.js:184
init @ getmdl-select.js:183
whenLoaded @ getmdl-select.js:5
load (async)
(anonymous) @ getmdl-select.js:9
(anonymous) @ getmdl-select.js:12