如何为Select2多选下拉框添加复选框选项？

要在Select2的多选下拉里显示复选框，你可以通过自定义模板渲染+事件同步的方式实现，具体代码和步骤如下：

1. 保留原HTML结构 #

你的select标签已经设置了multiple="multiple"，不需要修改，继续使用即可：

<select class="form-control select2" id="data-set" name="data[]" multiple="multiple">
      @foreach($data as $row)
            <option value="{{ $row->name }}">{{ $row->name }}</option>
      @endforeach
</select>

2. 修改Select2初始化JS #

通过templateResult自定义下拉选项的渲染模板，加入复选框，同时监听选中事件同步原生select的状态：

$('#data-set').select2({
  placeholder: "Select options",
  allowClear: true,
  // 渲染下拉选项，添加复选框
  templateResult: function(option) {
    if (option.loading) return option.text;
    return $(`<span><input type="checkbox" class="select2-checkbox" ${option.selected ? 'checked' : ''}> ${option.text}</span>`);
  },
  // 选中后顶部的显示样式
  templateSelection: function(option) {
    return option.text;
  }
}).on('select2:select select2:unselect', function(e) {
  // 同步原生option的选中状态，避免冲突
  const $targetOption = $(e.params.data.element);
  $targetOption.prop('selected', !$targetOption.prop('selected'));
});

3. 添加CSS优化显示 #

给复选框和文字加一点布局样式，让显示更整齐：

.select2-results__option span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.select2-checkbox {
  margin: 0;
  cursor: pointer;
}

说明 #

• templateResult会渲染下拉列表里的每一个选项，这里插入了复选框，并根据选项默认选中状态设置checked属性。
• 监听select2:select和select2:unselect事件是为了同步原生select的选中状态，避免Select2内部状态和原生DOM状态不一致的问题。
• CSS部分可以根据你的项目样式调整，主要是让复选框和文字对齐，提升视觉体验。

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