如何避免jQuery select2组件已选中的option选项重复显示

问题根因 #

你遇到的选项重复、无匹配结果两个问题的原因分别是：

1. 重复插入了相同id的option：你先在HTML渲染阶段插入了带selected属性的历史选项，后续调用接口拉取全量标签时，又把包含该历史标签的所有选项再次追加到select节点下，导致同一个值出现两次
2. select2初始化时机错误：你在option还没从接口拉取回来的时候就提前初始化了select2，后续追加的option没有被select2识别，所以会出现无匹配结果的提示

修复方案 #

1. 先调整HTML结构，移除提前渲染的历史选中option，仅保留默认占位项：

<!-- list tag -->
<div class="row mb-4 align-items-end">
  <div class="col-md-10">
    <div class="form-group">
      <label class="form-label">Tag</label>
      <div class="form-control-wrap">
        <select class="" name="tag" id="tag">
          <option value="" hidden>Select Tag</option>
        </select> 
      </div>
    </div>
  </div>         
</div>

2. 调整JS逻辑，等全量标签渲染完成后再初始化select2，同时直接在渲染option时判断选中状态：

const getTagList = () => {
  // 替换为你自己从数据库/接口拿到的历史选中标签ID
  const historySelectedTagId = '你的历史选中e.tag.id'
  axios.get(`url`)
    .then(function (res) { 
      if(res.data.status == 'success' && res.data.result.length > 0) {
        // 批量生成option HTML，避免多次操作DOM
        const optionHtml = res.data.result.map((e) => {
          const selectedAttr = e.tag.id === historySelectedTagId ? 'selected' : ''
          return `<option value="${e.tag.id}" ${selectedAttr}>${e.tag.title}</option>`
        }).join('')
        $('#tag').append(optionHtml)
        // 所有option插入完成后再初始化select2
        $('#tag').select2({
          placeholder: "Select Tag",
          allowClear: true
        })
      }
    })
}

// 页面加载完成后调用接口拉取标签
getTagList()

如果你不想在渲染option的时候判断选中，也可以在所有option插入完成后手动设置选中值，效果是一样的：

// 所有option插入完成后执行
$('#tag').val(historySelectedTagId).trigger('change')
$('#tag').select2({
  placeholder: "Select Tag",
  allowClear: true
})

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