如何修改jQuery Select2插件下拉选项属性并同步到多个同配置选择器

如何获取Select2中的所有下拉选项 #

• 获取渲染后的下拉选项DOM（包含aria-selected属性）：调用Select2实例的$results属性查找，代码为$('你的Select2选择器').data('select2').$results.find('li')，返回的就是所有下拉选项的<li>节点
• 获取原始选项配置：直接读取原生select的option节点即可，代码为$('你的select选择器 option')

多Select2同步选中状态的实现方案 #

不建议直接手动修改aria-selected属性，直接操作DOM会导致Select2内部数据和DOM状态不一致，触发不可预知的bug，最优方案是通过Select2自带的API实现状态同步，实现代码如下：

// 第一步：给所有需要同步的select元素加上统一类名，比如sync-select，初始化Select2
$('.sync-select').select2({
  // 你原本的Select2配置项
});

// 第二步：监听选中/取消选中事件，同步值到其他Select2实例
$('.sync-select').on('select2:select select2:unselect', function () {
  // 获取当前选中值
  const currentVal = $(this).val();
  // 给除当前触发元素外的所有同组Select2赋值并触发更新
  $('.sync-select').not(this).val(currentVal).trigger('change');
});

调用上述代码后，Select2会自动更新所有实例的aria-selected属性，无需手动修改。如果确实有特殊场景需要手动修改属性，可结合前面的获取选项的方法，遍历所有Select2实例找到对应选项修改属性即可。

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