js实现下拉多选框组件
时间: 2023-08-29 19:07:48 浏览: 49
好的,下拉多选框组件可以用 HTML、CSS 和 JavaScript 来实现。下面是一个简单的实现:
HTML:
```html
<div class="dropdown">
<button class="dropdown-toggle">请选择</button>
<div class="dropdown-menu">
<ul>
<li><label><input type="checkbox" value="1">选项1</label></li>
<li><label><input type="checkbox" value="2">选项2</label></li>
<li><label><input type="checkbox" value="3">选项3</label></li>
<li><label><input type="checkbox" value="4">选项4</label></li>
<li><label><input type="checkbox" value="5">选项5</label></li>
</ul>
</div>
</div>
```
CSS:
```css
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
padding: 6px 12px;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
display: none;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
}
.dropdown-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-menu li {
padding: 5px;
}
.dropdown-menu label {
display: block;
}
.dropdown-menu input[type="checkbox"] {
margin-right: 5px;
}
```
JavaScript:
```javascript
var dropdown = document.querySelector('.dropdown');
var toggle = dropdown.querySelector('.dropdown-toggle');
var menu = dropdown.querySelector('.dropdown-menu');
var inputs = menu.querySelectorAll('input[type="checkbox"]');
toggle.addEventListener('click', function() {
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
});
inputs.forEach(function(input) {
input.addEventListener('change', function() {
var selected = Array.from(inputs)
.filter(function(input) { return input.checked; })
.map(function(input) { return input.value; });
toggle.textContent = selected.length ? selected.join(', ') : '请选择';
});
});
```
这段代码中,我们首先通过 DOM API 获取 dropdown、toggle、menu 和 inputs 四个元素,然后为 toggle 元素添加了一个 click 事件监听器,当用户点击 toggle 时,菜单将显示或隐藏。同时,我们也为 inputs 中的每个 checkbox 元素添加了一个 change 事件监听器,当用户勾选或取消勾选某个选项时,我们将更新 toggle 的文本内容,显示用户已选择的选项。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)