为何Chosen组件导致JavaScript条件判断功能异常？

使用Bootstrap 3搭配Chosen组件构建下拉选择菜单，需求为：选中值为4（对应选项Social Services）、5（对应选项Prosecution）时，显示id为form2的第二个下拉菜单；选中Defendant、Minor、Witness时隐藏该菜单。原控制逻辑代码如下：

document.getElementById("form1").addEventListener("change", function () {
  var style = this.value == 4 || this.value == 5 ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

但启用Chosen组件（执行$(".chosen-select").chosen({width: "100%"});）后，选中目标选项时第二个菜单无法正常显示；移除Chosen初始化代码后，原生select可正常触发条件逻辑，但丢失Chosen的增强功能。

Chosen组件会隐藏原生的select元素，生成自定义的HTML结构（如带搜索功能的下拉面板）来替代显示。此时用户实际操作的是Chosen生成的DOM，而非原生select，因此给原生select绑定的change事件不会被触发。

Chosen提供了专属的事件系统，需要监听Chosen的change事件而非原生select的事件，具体调整方案如下：

方案一：使用jQuery绑定Chosen事件 #

// 先初始化Chosen组件
$(".chosen-select").chosen({width: "100%"});

// 绑定Chosen的change事件
$(".chosen-select").on("change", function () {
  var displayStyle = $(this).val() == 4 || $(this).val() == 5 ? "block" : "none";
  $("#form2").css("display", displayStyle);
});

方案二：原生JS方式绑定事件 #

如果项目中不依赖jQuery，可使用原生JS监听Chosen的chosen:updated事件：

// 初始化Chosen
document.querySelector(".chosen-select").chosen({width: "100%"});

// 绑定事件
document.querySelector(".chosen-select").addEventListener("chosen:updated", function () {
  var displayStyle = this.value == 4 || this.value == 5 ? "block" : "none";
  document.getElementById("form2").style.display = displayStyle;
});

额外注意事项 #

如果后续需要动态修改原生select的选项（新增、删除或修改选项），需调用$(".chosen-select").trigger("chosen:updated")（jQuery方式）或对应原生方法，通知Chosen更新UI，避免出现选项不同步的问题。

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