Can't select a value in the selectbox

Question

I'm just trying to use a simple select box but when I select a value it does not get selected. While in the example it does. I have imported the css and javascript but it just doesn't work.

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="mdl-textfield mdl-js-textfield getmdl-select"> <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly> <input type="hidden" value="" name="sample2"> <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i> <label for="sample2" class="mdl-textfield__label">Country</label> <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu"> <li class="mdl-menu__item" data-val="DEU">Germany</li> <li class="mdl-menu__item" data-val="BLR">Belarus</li> <li class="mdl-menu__item" data-val="RUS">Russia</li> </ul> </div> 

Answer 1

Your example doesn't include getmdl-select sources. Please attach sources from http://creativeit.github.io/getmdl-select .

<!-- getmdl -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="your_path_to/material-design-lite/material.min.css">
<script defer src="your_path_to/material-design-lite/material.min.js"></script>   
<!--getmdl-select-->   
<link rel="stylesheet" href="path_to/getmdl-select/getmdl-select.min.css">
<script defer src="path_to/getmdl-select/getmdl-select.min.js"></script>

UPDATE: detmdl-select sources was added

 { 'use strict'; (function () { function whenLoaded() { getmdlSelect.init('.getmdl-select'); }; window.addEventListener ? window.addEventListener("load", whenLoaded, false) : window.attachEvent && window.attachEvent("onload", whenLoaded); }()); var getmdlSelect = { _addEventListeners: function (dropdown) { var input = dropdown.querySelector('input'); var hiddenInput = dropdown.querySelector('input[type="hidden"]'); var list = dropdown.querySelectorAll('li'); var menu = dropdown.querySelector('.mdl-js-menu'); var arrow = dropdown.querySelector('.mdl-icon-toggle__label'); var label = ''; var previousValue = ''; var previousDataVal = ''; var opened = false; var setSelectedItem = function (li) { var value = li.textContent.trim(); input.value = value; list.forEach(function (li) { li.classList.remove('selected'); }); li.classList.add('selected'); dropdown.MaterialTextfield.change(value); // handles css class changes setTimeout(function () { dropdown.MaterialTextfield.updateClasses_(); //update css class }, 250); // update input with the "id" value hiddenInput.value = li.dataset.val || ''; previousValue = input.value; previousDataVal = hiddenInput.value; if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); menu['MaterialMenu'].hide(); input.dispatchEvent(evt); } else { input.fireEvent("onchange"); } } var hideAllMenus = function () { opened = false; input.value = previousValue; hiddenInput.value = previousDataVal; if (!dropdown.querySelector('.mdl-menu__container').classList.contains('is-visible')) { dropdown.classList.remove('is-focused'); } var menus = document.querySelectorAll('.getmdl-select .mdl-js-menu'); [].forEach.call(menus, function (menu) { menu['MaterialMenu'].hide(); }); var event = new Event('closeSelect'); menu.dispatchEvent(event); }; document.body.addEventListener('click', hideAllMenus, false); //hide previous select after press TAB dropdown.onkeydown = function (event) { if (event.keyCode == 9) { input.value = previousValue; hiddenInput.value = previousDataVal; menu['MaterialMenu'].hide(); dropdown.classList.remove('is-focused'); } }; //show select if it have focus input.onfocus = function (e) { menu['MaterialMenu'].show(); menu.focus(); opened = true; }; input.onblur = function (e) { e.stopPropagation(); }; //hide all old opened selects and opening just clicked select input.onclick = function (e) { e.stopPropagation(); if (!menu.classList.contains('is-visible')) { menu['MaterialMenu'].show(); hideAllMenus(); dropdown.classList.add('is-focused'); opened = true; } else { menu['MaterialMenu'].hide(); opened = false; } }; input.onkeydown = function (event) { if (event.keyCode == 27) { input.value = previousValue; hiddenInput.value = previousDataVal; menu['MaterialMenu'].hide(); dropdown.MaterialTextfield.onBlur_(); if (label !== '') { dropdown.querySelector('.mdl-textfield__label').textContent = label; label = ''; } } }; menu.addEventListener('closeSelect', function (e) { input.value = previousValue; hiddenInput.value = previousDataVal; dropdown.classList.remove('is-focused'); if (label !== '') { dropdown.querySelector('.mdl-textfield__label').textContent = label; label = ''; } }); //set previous value and data-val if ESC was pressed menu.onkeydown = function (event) { if (event.keyCode == 27) { input.value = previousValue; hiddenInput.value = previousDataVal; dropdown.classList.remove('is-focused'); if (label !== '') { dropdown.querySelector('.mdl-textfield__label').textContent = label; label = ''; } } }; if (arrow) { arrow.onclick = function (e) { e.stopPropagation(); if (opened) { menu['MaterialMenu'].hide(); opened = false; dropdown.classList.remove('is-focused'); dropdown.MaterialTextfield.onBlur_(); input.value = previousValue; hiddenInput.value = previousDataVal; } else { hideAllMenus(); dropdown.MaterialTextfield.onFocus_(); input.focus(); menu['MaterialMenu'].show(); opened = true; } }; } [].forEach.call(list, function (li) { li.onfocus = function () { dropdown.classList.add('is-focused'); var value = li.textContent.trim(); input.value = value; if (!dropdown.classList.contains('mdl-textfield--floating-label') && label == '') { label = dropdown.querySelector('.mdl-textfield__label').textContent.trim(); dropdown.querySelector('.mdl-textfield__label').textContent = ''; } }; li.onclick = function () { setSelectedItem(li); }; if (li.dataset.selected) { setSelectedItem(li); } }); }, init: function (selector) { var dropdowns = document.querySelectorAll(selector); [].forEach.call(dropdowns, function (dropdown) { getmdlSelect._addEventListeners(dropdown); componentHandler.upgradeElement(dropdown); componentHandler.upgradeElement(dropdown.querySelector('ul')); }); } }; } 

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="mdl-textfield mdl-js-textfield getmdl-select"> <input type="text" value="" class="mdl-textfield__input" id="sample1" readonly> <input type="hidden" value="" name="sample1"> <label for="sample1" class="mdl-textfield__label">Country</label> <ul for="sample1" class="mdl-menu mdl-menu--bottom-left mdl-js-menu"> <li class="mdl-menu__item" data-val="DEU">Germany</li> <li class="mdl-menu__item" data-val="BLR">Belarus</li> <li class="mdl-menu__item" data-val="RUS">Russia</li> </ul> </div> 

Answer 2

I have edited your code slightly, if I understood your problem correctly I think this is what you are looking for. Here's a working example.

 //grab all the list items let listItems = document.querySelectorAll( "li[class=mdl-menu__item]" ); //grab the input field let textField = document.getElementById( "sample2" ); //add an eventListener on selection to change value the input field as well as display text for ( let i = 0; i < listItems.length; i++ ) { listItems[ i ].addEventListener( "click", function() { textField.setAttribute("value", listItems[ i ].dataset.val ); textField.value = listItems[ i ].innerHTML; }); } 

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="mdl-textfield mdl-js-textfield getmdl-select"> <input type="text" value="" class="mdl-textfield__input" id="sample2" placeholder="Country" readonly> <input type="hidden" value="" name="sample2"> <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i> <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu"> <li class="mdl-menu__item" data-val="DEU">Germany</li> <li class="mdl-menu__item" data-val="BLR">Belarus</li> <li class="mdl-menu__item" data-val="RUS">Russia</li> </ul> </div>