在 HTML
中，`<
select>` 元素只允许使用 `<
option>` 元素作为子元素，而且 `<
option>` 元素是没有复选框的。
如果你想在
select option 中添加 checkbox，可以考虑使用 JavaScript 和 CSS 来
模拟实现。
以下是一种实现方式：
1. HTML代码：
```html
<div class="
select-wrapper">
<
select id="my-
select" multiple>
<
option value="1">
Option 1</
option>
<
option value="2">
Option 2</
option>
<
option value="3">
Option 3</
option>
</
select>
<div class="checkboxes">
<label>
<input type="checkbox" value="1">
Option 1
</label>
<label>
<input type="checkbox" value="2">
Option 2
</label>
<label>
<input type="checkbox" value="3">
Option 3
</label>
</div>
</div>
```
2. CSS代码：
```css
.
select-wrapper {
position: relative;
display: inline-block;
}
.
select-wrapper
select {
display: none;
}
.checkboxes {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: white;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
}
.checkboxes label {
display: block;
padding: 5px;
cursor: pointer;
}
.checkboxes input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}
```
3. JavaScript 代码：
```javascript
const
select = document.query
Selector('#my-
select');
const checkboxes = document.query
SelectorAll('.checkboxes input[type="checkbox"]');
// 给复选框设置初始状态
select.query
SelectorAll('
option').forEach((
option) => {
const value =
option.value;
const checkbox = document.query
Selector(`.checkboxes input[value="${value}"]`);
checkbox.checked =
option.
selected;
});
// 监听复选框的变化
checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', () => {
const value = checkbox.value;
const
option =
select.query
Selector(`
option[value="${value}"]`);
option.
selected = checkbox.checked;
});
});
// 监听
select 元素的变化
select.addEventListener('change', () => {
select.query
SelectorAll('
option').forEach((
option) => {
const value =
option.value;
const checkbox = document.query
Selector(`.checkboxes input[value="${value}"]`);
checkbox.checked =
option.
selected;
});
});
```
这个实现方式的思路是：在 `<
select>` 元素下方
添加一个 `<div>` 元素，里面包含多个带有复选框的 `<label>` 元素。通过 CSS 控制它们的位置和样式，使其看起来像是在 `<
select>` 元素的下拉列表
中显示的。然后通过 JavaScript 监听复选框和 `<
select>` 元素的变化，互相同步状态。
本文介绍如何在HTML的select元素中模拟带有图片的option，通过CSS和JavaScript实现更丰富的用户界面，提升下拉菜单的视觉效果。
最低0.47元/天 解锁文章
扫一扫
3023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
