javascript - 无法在选择框中选择值
问题描述
我只是想使用一个简单的选择框,但是当我选择一个值时,它不会被选中。虽然在示例中确实如此。我已经导入了 css 和 javascript,但它不起作用。
<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>
解决方案
您的示例不包括 getmdl-select 来源。请附上来自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>
更新:添加了 detmdl-select 来源
{
'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>
推荐阅读
- spring-boot - 在@query注释JPA中使用带有子查询的分页时出错
- ios - AR 视图中的 Vuforia 在 iOS 设备中显示黑屏
- excel - 在给定 Range 对象的 VBA 中循环两个相同长度的单元格范围
- bash - 引用通过 TRAMP 远程评估的 org-mode 'src' 块内的本地目录
- typescript - 如何在类型脚本中创建不同的通用函数?
- python - 处理 '&' 在 url 参数 DJANGO
- sql - SQL 缺少关键字
- r - 如何根据其他两个变量的所有组合获得一个显示一个变量平均值的三向表?
- java - 尝试运行主类时将 SQL 转换为 MapReduce java.lang.NoSuchMethodException
- reactjs - 我应该为对象休息道具声明什么类型?