下拉复
选框（Multi
Select Dropdown）可以让用户从一个
下拉菜单
中选择多个
选项。IE11 可以使用 HTML 和 JavaScript 实现这种
下拉复
选框。
以下是一个简单的示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multi
Select Dropdown in IE11</title>
<style>
.dropdown {
position: relative;
display: inline-block;
width: 200px;
}
.dropdown button {
width: 100%;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
text-align: left;
cursor: pointer;
}
.dropdown ul {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
display: none;
padding: 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ddd;
max-height: 150px;
overflow-y: auto;
}
.dropdown ul li {
padding: 10px;
cursor: pointer;
}
.dropdown ul li:hover {
background-color: #f5f5f5;
}
.dropdown input[type="checkbox"] {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="dropdown">
<button>Choose
options</button>
<ul>
<li><input type="checkbox" name="
option1" value="
Option 1">
Option 1</li>
<li><input type="checkbox" name="
option2" value="
Option 2">
Option 2</li>
<li><input type="checkbox" name="
option3" value="
Option 3">
Option 3</li>
<li><input type="checkbox" name="
option4" value="
Option 4">
Option 4</li>
<li><input type="checkbox" name="
option5" value="
Option 5">
Option 5</li>
</ul>
</div>
<script>
var dropdown = document.query
Selector('.dropdown');
var button = dropdown.query
Selector('button');
var list = dropdown.query
Selector('ul');
var checkboxes = list.query
SelectorAll('input[type="checkbox"]');
button.addEventListener('click', function() {
list.style.display = list.style.display === 'none' ? 'block' : 'none';
});
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var
selected = [];
checkboxes.forEach(function(cb) {
if (cb.checked) {
selected.push(cb.value);
}
});
button.textContent =
selected.length ?
selected.join(', ') : 'Choose
options';
});
});
</script>
</body>
</html>
```
这个示例使用了一个 `<div>` 元素来包含
下拉复
选框。其
中有一个 `<button>` 元素用来显示当前
选择的
选项，一个 `<ul>` 元素用来显示
选项列表，以及一些 `<li>` 元素用来显示每个
选项。每个
选项都有一个 `<input type="checkbox">` 元素，用来让用户
选择该
选项。
JavaScript 部分监听了 `<button>` 元素的点击事件，并在点击时切换显示或隐藏
选项列表。同时，它还监听了每个 `<input type="checkbox">` 元素的改变事件，并在每次改变时更新 `<button>` 元素的文本内容。
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
