如何在Select2中固定数据库返回的特定选项且不触发change事件？

我完全懂你的困扰——有时候我们只是想悄悄更新Select2的选中状态，比如初始化或者从数据库加载数据后回显，可一触发change事件，绑定的那些业务逻辑就跟着跑起来了，完全不是我们想要的效果。你当前代码里的trigger("change.select2")就是问题所在，它会主动触发Select2的change事件链，连带触发你绑定的业务逻辑。

这里有两个靠谱的解决方案，都能避开change事件：

方法一：直接用Select2的data方法设置选中项 #

Select2提供了select2('data', dataObj)方法，可以直接把选中数据注入组件，默认不会触发任何事件。你只需要传入包含id和text的对象（和你的选项结构匹配就行）：

// 假设v是目标选项的id，dc是你的数据对象
$('.roles').select2('data', {
  id: v,
  text: '对应选项的显示文本' // 可以从你的数据源里拿到对应text，或者确保和下拉选项一致
}).attr("old", v).attr('rowid', dc.id);

这个方法会自动同步原生<select>元素的选中状态，同时更新Select2的UI，全程不会触发change事件。

方法二：原生val设置后手动渲染UI #

如果你的目标选项已经存在于Select2的下拉列表中（不管是本地还是已加载的远程选项），可以先用原生val()设置选中值，再调用select2('render')更新组件UI，同样不会触发change事件：

$('.roles').val(v).attr("old", v).attr('rowid', dc.id);
// 手动渲染Select2，同步UI显示
$('.roles').select2('render');

原生val()只会修改<select>元素的值，Select2不会自动感知，所以需要调用render方法让组件更新显示状态，这个过程不会触发任何事件。

额外注意事项 #

• 如果是远程数据源（AJAX加载），一定要确保数据加载完成后再执行上述代码，否则目标选项还没被加载到Select2中，设置会无效。
• 两种方法都会同步原生<select>元素的状态，不用担心表单提交时的值不一致问题。

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