JavaScript实现Select2下拉框自动选中不生效问题求助

• 直接修改原生<select>元素value的方式仅对浏览器原生下拉框生效。当前下拉框集成了Select2插件，初始化完成后原生select会被添加select2-hidden-accessible类隐藏，页面实际展示的是插件独立渲染的自定义下拉组件。单纯修改原生DOM的value值不会触发Select2的状态监听逻辑，因此无法同步更新前端的选中展示效果。

Select2默认监听原生select元素的change事件来同步UI状态，只要在赋值后触发该事件，插件就会自动完成值和展示效果的同步，两种实现方式按需选择即可：

• 页面已加载jQuery（Select2本身依赖jQuery，绝大多数集成场景都适用），直接使用官方推荐写法：

// 赋值后触发change事件，通知Select2更新选中状态
$('#mySelect').val('291349').trigger('change');

• 无jQuery环境下使用原生JS实现：

const selectElement = document.getElementById('mySelect');
selectElement.value = '291349';
// 派发可冒泡的change事件，让Select2捕获到值变更动作
selectElement.dispatchEvent(new Event('change', { bubbles: true }));

• 确保代码执行时机正确：要等Select2完成初始化后再执行选中逻辑，如果是动态渲染的页面，可以将代码放在DOMContentLoaded事件回调中，或添加短延时避免执行过早失效。
• 不要直接修改Select2渲染的展示节点：不要手动修改Select2生成的span标签内的文本，这种方式仅修改了表面展示效果，原生select的实际值不会同步，后续表单提交、逻辑取值都会拿到错误结果。
• 确认目标值匹配：赋值前确认要选中的option对应的value值与代码中填写的291349完全一致，避免多余空格、特殊字符转义问题导致选项匹配失败。

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