如何仅用HTML实现带复选框的下拉菜单？

原生HTML的<select>标签支持通过multiple属性实现多选，但不会显示复选框，也没有下拉折叠的效果。要实现你需要的「下拉展开后每个选项带复选框、可多选」的效果，需要自定义实现，以下是完整方案：

1. 完整代码实现 #

HTML结构 #

<form action="/action_page.php" method="post">
  <div class="custom-select-container">
    <label for="car-select">Choose a car:</label>
    <div class="select-box">
      <div class="selected-options">
        <span class="placeholder">请选择车型</span>
      </div>
      <div class="options-list">
        <label class="option-item">
          <input type="checkbox" name="cars[]" value="volvo">
          <span>Volvo</span>
        </label>
        <label class="option-item">
          <input type="checkbox" name="cars[]" value="saab">
          <span>Saab</span>
        </label>
        <label class="option-item">
          <input type="checkbox" name="cars[]" value="opel">
          <span>Opel</span>
        </label>
        <label class="option-item">
          <input type="checkbox" name="cars[]" value="audi">
          <span>Audi</span>
        </label>
      </div>
    </div>
  </div>
  <br><br>
  <input type="submit" value="Submit">
</form>

CSS样式 #

.custom-select-container {
  position: relative;
  width: 200px;
}

.select-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.selected-options {
  padding: 8px 12px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.placeholder {
  color: #999;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.select-box.open .options-list {
  display: block;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.option-item input {
  margin-right: 8px;
}

/* 可选：添加选中标签的样式 */
.selected-tag {
  background-color: #e0e0e0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 14px;
}

JavaScript交互 #

const selectBox = document.querySelector('.select-box');
const selectedOptions = selectBox.querySelector('.selected-options');
const optionsList = selectBox.querySelector('.options-list');
const checkboxes = optionsList.querySelectorAll('input[type="checkbox"]');

// 点击下拉框切换展开/收起状态
selectBox.addEventListener('click', (e) => {
  if (!e.target.closest('.option-item')) {
    selectBox.classList.toggle('open');
  }
});

// 选中复选框时，更新顶部的选中项显示
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    selectedOptions.innerHTML = '';
    const checkedItems = Array.from(checkboxes).filter(cb => cb.checked);
    
    if (checkedItems.length === 0) {
      selectedOptions.innerHTML = '<span class="placeholder">请选择车型</span>';
      return;
    }
    
    checkedItems.forEach(item => {
      const tag = document.createElement('span');
      tag.className = 'selected-tag';
      tag.textContent = item.nextElementSibling.textContent;
      selectedOptions.appendChild(tag);
    });
  });
});

// 点击页面其他区域，收起下拉框
document.addEventListener('click', (e) => {
  if (!e.target.closest('.select-box')) {
    selectBox.classList.remove('open');
  }
});

2. 提交说明 #

• 表单提交时，选中的车型会以cars[]为参数名，以数组形式提交到后端（比如PHP可以通过$_POST['cars']获取所有选中的值）
• 样式可以根据需求自由调整，比如修改颜色、宽度、选中标签的样式等

内容的提问来源于stack exchange，提问作者jordon van forest