如何将Select2下拉框选中选项显示在独立输入框并从原下拉移除

核心思路 #

不要直接删除Select2的option节点，而是通过全局已选集合统一管理选中状态，在Select2渲染下拉选项时自动过滤已选项，避免手动操作DOM导致的功能异常。

具体实现步骤 #

• 第一步：声明全局已选集合，存储所有已选中的code值，方便快速判重
• 第二步：改造Select2的ajax回调，渲染下拉选项时过滤掉已在集合中的项
• 第三步：监听Select2官方的select2:select选中事件，选中项加入已选集合后同步渲染到独立的已选展示区
• 第四步：为已选展示区的每个选项添加删除事件，移除后同步更新已选集合并刷新Select2下拉选项，被删除的选项会自动恢复到下拉列表中

示例代码 #

HTML部分 #

<!-- 已提前引入jQuery、Select2的JS和CSS依赖 -->

<!-- 下拉选择框 -->
<select id="codeDropdown" style="width: 100%"></select>

<!-- 独立已选展示区 -->
<div id="selectedCodeArea" style="margin: 10px 0; padding: 8px; border: 1px solid #eee; min-height: 30px">
  <span>已选选项：</span>
</div>

<!-- 如需表单提交可加隐藏input存储已选值 -->
<input type="hidden" id="selectedCodeInput" name="selectedCodes">

JS部分 #

// 全局已选集合，统一管理选中状态
const selectedCodes = new Set()

function initCodeSelectTwo() {
  $('#codeDropdown').select2({
    width: "100%",
    ajax: {
      url: 'urlOne',
      dataType: 'json',
      type: 'GET',
      data: function (params) {
        return {
          search: params.term // 传递搜索关键字，可根据接口需求调整
        }
      },
      processResults: function (data) {
        // 过滤掉已经选中的选项，不渲染到下拉列表
        const filteredOptions = data.filter(item => !selectedCodes.has(item.Code))
        return {
          results: filteredOptions.map(item => ({
            id: item.Code,
            text: item.Code
          }))
        }
      }
    }
  })

  // 初始加载已经分配的选项
  $.ajax({
    type: 'GET',
    url: 'urlOne' // 加载已分配选项的接口地址
  }).then((data) => {
    // 初始已选值加入集合
    data.forEach(item => {
      selectedCodes.add(item.Code)
      renderSelectedTag(item.Code)
    })
    // 同步隐藏输入框值+刷新Select2下拉选项
    syncHiddenInput()
    $('#codeDropdown').trigger('change')
  })

  // 监听Select2选中事件
  $('#codeDropdown').on('select2:select', function (e) {
    const selectedCode = e.params.data.id
    // 加入已选集合
    selectedCodes.add(selectedCode)
    // 渲染到已选展示区
    renderSelectedTag(selectedCode)
    // 同步隐藏输入框值+清空Select2当前选中值，方便下次继续选择
    syncHiddenInput()
    $('#codeDropdown').val(null).trigger('change')
  })
}

// 渲染已选标签到独立展示区
function renderSelectedTag(code) {
  const tag = $(`
    <span class="selected-tag" data-code="${code}" style="display: inline-block; margin: 0 4px; padding: 2px 6px; background: #e9ecef; border-radius: 4px;">
      ${code}
      <span class="delete-tag" style="margin-left: 4px; cursor: pointer; color: #666;">×</span>
    </span>
  `)
  // 绑定删除事件
  tag.find('.delete-tag').on('click', function() {
    // 从已选集合中移除
    selectedCodes.delete(code)
    // 移除标签
    tag.remove()
    // 同步隐藏输入框值+刷新Select2下拉，被删除的选项会重新出现
    syncHiddenInput()
    $('#codeDropdown').trigger('change')
  })
  $('#selectedCodeArea').append(tag)
}

// 同步已选值到隐藏输入框，用于表单提交
function syncHiddenInput() {
  $('#selectedCodeInput').val(Array.from(selectedCodes).join(','))
}

// 页面加载完成后初始化
$(function() {
  initCodeSelectTwo()
})

关键优化点 #

• 所有状态通过selectedCodes集合统一管理，避免直接操作DOM导致的状态不同步
• 完全使用Select2官方提供的事件和API，兼容性更好，不会出现功能不稳定的问题
• 不需要手动增删Select2的option节点，通过ajax回调过滤实现已选项隐藏，逻辑更简洁
• 已选值同步到隐藏输入框，可直接用于普通表单提交，无需额外处理

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