Select2多选组件中使用hidden属性实现选中隐藏、取消选中显示的问题咨询

你好呀！针对你在Select2多选组件中遇到的「想用hidden属性替代disabled，实现选中选项隐藏、取消选中后重新显示」的问题，我来给你梳理下解决方案~

核心问题：为什么直接用hidden属性不生效？ #

Select2的下拉列表并不是直接渲染原生<option>元素，而是会把原生选项转换成它自己封装的DOM结构（比如带有select2-results__option类的<li>元素）。原生<option>的hidden属性不会被Select2监听或同步到它的自定义DOM上，所以直接设置prop('hidden', true)不会影响下拉列表的显示，这就是你遇到的问题根源。

可行的实现方案 #

虽然直接用原生hidden属性走不通，但我们有两种靠谱的方式实现你想要的效果：

方案1：推荐！利用disabled属性 + CSS隐藏（改动最小、最稳定）

你现有的disabled逻辑其实已经能实现「选中后无法再选」的核心功能，只需要加一行CSS，就能把禁用的选项从下拉列表中彻底隐藏（而不是默认的变灰状态），完美模拟hidden的视觉效果：

/* 隐藏Select2下拉中被禁用的选项 */
.select2-results__option[aria-disabled=true] {
    display: none !important;
}

你的JS代码保持现有逻辑即可，不需要做额外修改：

// 选中时禁用对应选项
function updateSelections(selectedValue) {
  $("#multiple_one option[value='" + selectedValue + "']").prop('disabled', true);
  $("#multiple_two option[value='" + selectedValue + "']").prop('disabled', true);
}

// 取消选中时启用对应选项
function updateSelectionsTwo(selectedValue) {
  $("#multiple_one option[value='" + selectedValue + "']").prop('disabled', false);
  $("#multiple_two option[value='" + selectedValue + "']").prop('disabled', false);
}

这个方案的优势：

• 不需要销毁/重建Select2，性能更好，没有页面闪烁
• 复用Select2原生的disabled逻辑，避免自定义DOM操作可能带来的bug
• 代码改动极小，只需要新增一行CSS样式

方案2：通过销毁重建Select2实现hidden属性生效（不推荐，仅作参考）

如果你坚持要使用hidden属性，唯一的办法是在修改hidden属性后，销毁并重新初始化Select2，让它重新读取原生<option>的状态。但这种方式会有性能损耗，而且可能导致下拉列表闪烁：

// 选中时隐藏对应选项并重建Select2
function updateSelections(selectedValue) {
  $("#multiple_one option[value='" + selectedValue + "']").prop('hidden', true);
  $("#multiple_two option[value='" + selectedValue + "']").prop('hidden', true);
  // 销毁并重建Select2以同步状态
  $("#multiple_one").select2("destroy").select2();
  $("#multiple_two").select2("destroy").select2();
}

// 取消选中时显示对应选项并重建Select2
function updateSelectionsTwo(selectedValue) {
  $("#multiple_one option[value='" + selectedValue + "']").prop('hidden', false);
  $("#multiple_two option[value='" + selectedValue + "']").prop('hidden', false);
  $("#multiple_one").select2("destroy").select2();
  $("#multiple_two").select2("destroy").select2();
}

总结 #

• 直接使用原生<option>的hidden属性无法实现需求，因为Select2不基于该属性渲染下拉列表
• 优先推荐「disabled属性 + CSS隐藏」的方案，兼顾功能、性能和稳定性
• 若一定要用hidden属性，只能通过销毁重建Select2的方式实现，但体验和性能不如方案1

备注：内容来源于stack exchange，提问作者Filbert Umbawa