如何在select标签内添加复选框并获取选中值（附AJAX代码）

嘿，刚好碰到过类似的需求！原生的<select>标签本身是不支持嵌套复选框的，所以得换个思路来实现带多选功能的下拉选择器。结合你现有的AJAX加载逻辑，我给你两种实用的解决方案：

方案一：纯自定义模拟下拉复选框 #

这种方式完全自己控制样式和逻辑，不用依赖任何插件，灵活性拉满。

1. 先改HTML结构 #

把原来的<select>替换成自定义的下拉容器，再加个隐藏输入框用来存选中的值（方便后续提交或使用）：

<div class="custom-select-checkbox">
  <div class="select-header" id="select-header">请选择发票</div>
  <div class="select-options" id="select-options" style="display: none;">
    <!-- 后续通过AJAX追加带复选框的选项 -->
  </div>
</div>
<input type="hidden" id="selected-invoices" name="selected_invoices" />

2. 加基础CSS样式 #

给自定义下拉加个基础样式，你可以根据自己的项目风格调整：

.custom-select-checkbox {
  position: relative;
  width: 250px;
}
.select-header {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
}
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  max-height: 220px;
  overflow-y: auto;
  background-color: #fff;
}
.select-option {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.select-option:hover {
  background-color: #f8f9fa;
}
.select-option input[type="checkbox"] {
  margin-right: 8px;
}

3. 修改你的AJAX数据追加逻辑 #

把原来追加<option>的代码改成追加带复选框的选项：

success: function(data) {
  var toAppend = '';
  $.each(JSON.parse(data),function(i,o) {
    toAppend += '<div class="select-option">' +
                  '<input type="checkbox" value="' + o.invoice_id + '" id="invoice-' + o.invoice_id + '">' +
                  '<label for="invoice-' + o.invoice_id + '">' + o.invoice_number + '</label>' +
                '</div>';
  });
  $('#select-options').append(toAppend);
}

4. 添加交互逻辑 #

写点JS来控制下拉的展开收起，以及收集选中的值：

// 点击头部切换下拉展开/收起
$('#select-header').click(function() {
  $('#select-options').toggle();
});

// 复选框状态变化时更新选中值
$(document).on('change', '.select-option input[type="checkbox"]', function() {
  var selectedIds = [];
  // 遍历所有选中的复选框，收集值
  $('.select-option input[type="checkbox"]:checked').each(function() {
    selectedIds.push($(this).val());
  });
  // 把选中的值存到隐藏输入框里，用逗号分隔
  $('#selected-invoices').val(selectedIds.join(','));
  // 顺便更新头部的显示文本，让用户知道选了多少项
  $('#select-header').text(selectedIds.length > 0 ? '已选' + selectedIds.length + '项' : '请选择发票');
});

// 点击页面其他区域关闭下拉
$(document).click(function(e) {
  if (!$(e.target).closest('.custom-select-checkbox').length) {
    $('#select-options').hide();
  }
});

方案二：用第三方插件快速实现 #

如果不想自己写太多样式和逻辑，可以用成熟的多选下拉插件，比如select2或者bootstrap-select，这些插件自带多选功能，视觉上就像带复选框的下拉。以select2为例：

1. 准备插件资源 #

你可以下载插件的本地CSS和JS文件引入到项目里（或者用CDN，自行搜索获取资源链接），然后修改HTML：

<select name="client_invoices" id="client_invoices" class="form-control simple-select" multiple="multiple"></select>

给<select>加上multiple属性，表示支持多选。

2. 初始化插件并适配你的AJAX逻辑 #

// 初始化select2
$('#client_invoices').select2({
  placeholder: '请选择发票',
  allowClear: true // 允许清空选择
});

// 你的AJAX追加数据逻辑可以保留，只需最后触发一下change让插件更新
success: function(data) {
  var toAppend = '';
  $.each(JSON.parse(data),function(i,o) {
    toAppend += '<option value='+o.invoice_id+'>'+ o.invoice_number+'</option>';
  });
  $('#client_invoices').append(toAppend).trigger('change');
}

// 获取选中值的方法很简单
var selectedValues = $('#client_invoices').val(); // 返回的是选中值的数组，比如["123", "456"]

小提醒 #

• 原生<select>真的没法直接嵌复选框，所以必须用自定义UI或者插件来实现多选
• 自定义方案适合需要高度定制样式的场景，插件方案适合快速开发，省时间
• 获取选中值时，自定义方案靠收集复选框状态，插件方案直接调用组件的val()方法就行

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