js实现下拉多选框组件
时间: 2023-08-29 07:08:17 浏览: 50
下面是一个简单的实现下拉多选框组件的示例代码:
```html
<!-- HTML结构 -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
选择选项<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#" data-value="option1">选项1</a></li>
<li><a href="#" data-value="option2">选项2</a></li>
<li><a href="#" data-value="option3">选项3</a></li>
<li><a href="#" data-value="option4">选项4</a></li>
</ul>
<input type="hidden" name="selected-options">
</div>
```
```js
// JS代码
let dropdown = document.querySelector('.dropdown');
let dropdownToggle = dropdown.querySelector('.dropdown-toggle');
let dropdownMenu = dropdown.querySelector('.dropdown-menu');
let dropdownItems = dropdownMenu.querySelectorAll('li a');
let selectedOptions = dropdown.querySelector('input[name="selected-options"]');
dropdownToggle.addEventListener('click', function(e) {
e.stopPropagation();
dropdownMenu.classList.toggle('show');
});
for (let i = 0; i < dropdownItems.length; i++) {
let item = dropdownItems[i];
item.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
let value = item.getAttribute('data-value');
item.classList.toggle('selected');
updateSelectedOptions();
});
}
function updateSelectedOptions() {
let values = [];
for (let i = 0; i < dropdownItems.length; i++) {
let item = dropdownItems[i];
if (item.classList.contains('selected')) {
values.push(item.getAttribute('data-value'));
}
}
selectedOptions.value = values.join(',');
}
```
这段代码实现了一个下拉多选框组件,用户可以选择多个选项,选项的值将以逗号分隔的形式保存在一个隐藏的表单元素中。当用户点击下拉框时,下拉框的显示状态将切换;当用户点击选项时,选项将被选中或取消选中,并更新隐藏的表单元素中的值。