Select2插件技术问询：如何将多选选中项显示在表单元素外

嘿，我来帮你搞定这个Select2多选下拉的样式问题！想要把选中项移到下拉栏外面，以每行一个的形式堆叠展示，咱们可以通过自定义Select2的渲染模板+CSS调整来实现，具体操作步骤如下：

1. 准备HTML结构 #

首先在页面里添加一个用来存放选中项的外部容器，再加上你的多选select：

<div id="selected-items-wrapper"></div>
<select id="multi-select" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

2. 自定义Select2的选中项渲染逻辑 #

Select2提供了templateSelection配置项，我们可以用它把选中项渲染到外部容器，同时让下拉栏里不再显示选中项：

$('#multi-select').select2({
  templateSelection: function(choice) {
    // 处理占位符（未选中任何选项时）
    if (choice.id === '') {
      return choice.text;
    }
    // 创建单个选中项的DOM元素，带移除按钮
    const itemEl = $(`
      <div class="selected-item">
        <span>${choice.text}</span>
        <button class="remove-btn" data-id="${choice.id}">&times;</button>
      </div>
    `);
    // 把创建好的元素添加到外部容器
    $('#selected-items-wrapper').append(itemEl);
    // 返回空字符串，让下拉栏里不显示选中项
    return '';
  },
  placeholder: "请选择选项",
  width: '100%'
});

3. 绑定移除选中项的事件 #

给每个选中项的移除按钮绑定点击事件，实现取消选中并删除DOM元素的功能：

$(document).on('click', '.remove-btn', function() {
  const targetId = $(this).data('id');
  // 取消select中对应选项的选中状态
  $('#multi-select').find(`option[value="${targetId}"]`).prop('selected', false);
  // 触发Select2的change事件，更新内部状态
  $('#multi-select').trigger('change');
  // 删除当前选中项的DOM元素
  $(this).closest('.selected-item').remove();
});

4. 用CSS实现堆叠样式 #

给外部容器和选中项添加样式，让它们每行一个展示，同时隐藏Select2默认的选中项容器：

#selected-items-wrapper {
  margin-bottom: 12px;
}

.selected-item {
  background-color: #f1f3f5;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remove-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6b7280;
  padding: 0 4px;
}

/* 隐藏Select2默认的选中项容器 */
.select2-selection--multiple .select2-selection__choice {
  display: none !important;
}

/* 调整下拉栏的默认样式，让它更美观 */
.select2-selection--multiple {
  min-height: 38px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
}

5. 处理初始化时的已选中项 #

如果页面加载时select已经有默认选中的选项，我们需要手动触发一次change事件，让模板渲染这些选中项：

$('#multi-select').trigger('change');

这样操作完成后，你选中的选项就会乖乖地显示在下拉栏外面，每行一个堆叠起来，还能通过点击叉号轻松移除，完全符合你的需求~

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