如何为下拉列表选项旁添加复选框 含无JS/JS方案

注意：原生<select>元素不支持在内部<option>标签中嵌入复选框控件，没有仅靠原生HTML属性就能实现的方案，下面提供两种可直接落地的实现： #

方案一：无JavaScript实现（纯HTML+CSS） #

不需要写任何脚本，直接替换原有select结构即可，保留了你原有代码的全部外层类名，不会破坏现有页面布局，表单提交时会自动收集勾选的参数。

实现代码 #

HTML结构：

<div class="upload_modules">
  <div class="modules__title">
    <h4>Other Info</h4>
  </div>
  <!-- end /.module_title -->
  <div class="modules__content">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="soft">VERSION</label>
          <div class="select-wrap select-wrap2">
            <input type="checkbox" id="dropdownToggle" hidden>
            <label for="dropdownToggle" class="text_field select-trigger">
              <span class="selected-text">Select From List</span>
              <span class="lnr icon-arrow-down"></span>
            </label>
            <div class="dropdown-panel">
              <label class="dropdown-option">
                <input type="checkbox" name="version" value="">
                <span>Select From List</span>
              </label>
              <label class="dropdown-option">
                <input type="checkbox" name="version" value="4">
                <span>WordPress 4</span>
              </label>
              <label class="dropdown-option">
                <input type="checkbox" name="version" value="4.1">
                <span>WordPress 4.1.*</span>
              </label>
              <label class="dropdown-option">
                <input type="checkbox" name="version" value="4.2">
                <span>WordPress 4.2.*</span>
              </label>
              <label class="dropdown-option">
                <input type="checkbox" name="version" value="4.3">
                <span>WordPress 4.3.*</span>
              </label>
              <label class="dropdown-option">
                <input type="checkbox" name="version" value="4.4">
                <span>WordPress 4.4.*</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

配套CSS：

.select-wrap {
  position: relative;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  margin: 0;
}
#dropdownToggle:not(:checked) ~ .dropdown-panel {
  display: none;
}
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 100;
  padding: 4px 0;
}
.dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  margin: 0;
}
.dropdown-option:hover {
  background: #f5f5f5;
}

方案说明 #

• 用隐藏的checkbox控制下拉面板的展开/收起，不需要JS触发
• 所有选项的name属性保持为version，和原有select的参数名一致，后端接收逻辑不需要修改
• 需要默认选中某一项时，直接给对应<input type="checkbox">加checked属性即可

方案二：JavaScript实现（保留原生select结构） #

如果你不想修改原有HTML代码，可以通过JS动态增强原生select，自动生成带复选框的下拉面板，同时把选中状态同步回原select，不影响原有表单逻辑和绑定事件。

实现代码 #

不需要改动你提供的原始HTML，直接加入以下CSS和JS即可：

.multi-select-wrap {
  position: relative;
  width: 100%;
}
.multi-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.multi-select-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 4px;
  z-index: 100;
  padding: 4px 0;
  display: none;
}
.multi-select-panel.show {
  display: block;
}
.multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  margin: 0;
}
.multi-select-option:hover {
  background: #f5f5f5;
}
#soft {
  display: none;
}

document.addEventListener('DOMContentLoaded', function() {
  const originalSelect = document.getElementById('soft');
  const parentWrap = originalSelect.closest('.select-wrap');
  const arrowIcon = parentWrap.querySelector('.icon-arrow-down');

  // 构建自定义下拉结构
  const multiWrap = document.createElement('div');
  multiWrap.className = 'multi-select-wrap';
  const trigger = document.createElement('div');
  trigger.className = 'multi-select-trigger text_field';
  const selectedText = document.createElement('span');
  selectedText.textContent = 'Select From List';
  trigger.append(selectedText, arrowIcon);

  const panel = document.createElement('div');
  panel.className = 'multi-select-panel';

  // 同步原select选项生成带复选框的项
  Array.from(originalSelect.options).forEach(option => {
    const optionLabel = document.createElement('label');
    optionLabel.className = 'multi-select-option';
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.value = option.value;
    checkbox.addEventListener('change', function() {
      option.selected = this.checked;
      updateSelectedText();
    });
    const textSpan = document.createElement('span');
    textSpan.textContent = option.textContent;
    optionLabel.append(checkbox, textSpan);
    panel.appendChild(optionLabel);
  });

  multiWrap.append(trigger, panel);
  parentWrap.insertBefore(multiWrap, originalSelect);

  // 下拉展开/收起逻辑
  trigger.addEventListener('click', e => {
    e.stopPropagation();
    panel.classList.toggle('show');
  });
  document.addEventListener('click', () => panel.classList.remove('show'));

  // 更新选中项显示文本
  function updateSelectedText() {
    const selectedLabels = Array.from(originalSelect.selectedOptions).map(opt => opt.textContent);
    selectedText.textContent = selectedLabels.length ? selectedLabels.join(', ') : 'Select From List';
  }
});

方案说明 #

• 原生select元素会被隐藏但保留在DOM中，原有表单提交、事件绑定逻辑完全不受影响
• 支持点击页面其他区域自动关闭下拉面板
• 已选中的选项会自动汇总显示在下拉触发栏

内容的提问来源于stack exchange，提问作者AliNajafZadeh