html select option中添加checkbox

在 HTML 中，`<select>` 元素只允许使用 `<option>` 元素作为子元素，而且 `<option>` 元素是没有复选框的。

如果你想在 select option 中添加 checkbox，可以考虑使用 JavaScript 和 CSS 来模拟实现。

以下是一种实现方式：

1. 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代码：

.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 代码：

const select = document.querySelector('#my-select');
const checkboxes = document.querySelectorAll('.checkboxes input[type="checkbox"]');

// 给复选框设置初始状态
select.querySelectorAll('option').forEach((option) => {
  const value = option.value;
  const checkbox = document.querySelector(`.checkboxes input[value="${value}"]`);
  checkbox.checked = option.selected;
});

// 监听复选框的变化
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    const value = checkbox.value;
    const option = select.querySelector(`option[value="${value}"]`);
    option.selected = checkbox.checked;
  });
});

// 监听 select 元素的变化
select.addEventListener('change', () => {
  select.querySelectorAll('option').forEach((option) => {
    const value = option.value;
    const checkbox = document.querySelector(`.checkboxes input[value="${value}"]`);
    checkbox.checked = option.selected;
  });
});

这个实现方式的思路是：在 `<select>` 元素下方添加一个 `<div>` 元素，里面包含多个带有复选框的 `<label>` 元素。通过 CSS 控制它们的位置和样式，使其看起来像是在 `<select>` 元素的下拉列表中显示的。然后通过 JavaScript 监听复选框和 `<select>` 元素的变化，互相同步状态。