Select2 Ajax多选组件二次点击无法取消选中问题排查

问题现象 #

使用Select2 Ajax多选组件时，仅能通过单击选中选项，二次点击无法取消选中，不符合组件默认的单击切换选中状态的行为。

代码问题分析 #

问题出在templateResult函数的逻辑上：

templateResult:function(repo){
  console.log(repo)
  if (repo.loading) return repo.name;
  
  if (repo && !repo.selected){
    return`
    <span>
      ${repo.name}(${repo.tags})
    </span>
    `
  }
  
},

当选项被选中后（repo.selected为true），这个函数没有返回任何渲染内容，导致下拉框中该选项无法正常显示。Select2无法识别到已选中的选项元素，自然无法触发二次点击取消的逻辑。

修复方案 #

修改templateResult函数，移除!repo.selected的判断，确保无论选项是否被选中，都能返回对应的渲染内容：

templateResult:function(repo){
  console.log(repo)
  if (repo.loading) return repo.name;
  
  // 去掉!repo.selected的判断，所有非loading状态的选项都正常渲染
  return`
  <span>
    ${repo.name}(${repo.tags})
  </span>
  `
},

如果需要区分已选中的选项样式，可以在返回的HTML中根据repo.selected添加类名，比如：

templateResult:function(repo){
  console.log(repo)
  if (repo.loading) return repo.name;
  
  const selectedClass = repo.selected ? 'selected-option' : '';
  return`
  <span class="${selectedClass}">
    ${repo.name}(${repo.tags})
  </span>
  `
},

同时可以在CSS中定义.selected-option的样式，比如变灰或者添加勾选标记，提升用户体验。

补充说明 #

• 确保multiple: true配置正确（你的代码中已经设置），这是多选功能的基础。
• closeOnSelect: false配置没问题，保持下拉框打开方便连续选择/取消。

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