如何在Chosen JS中更新下拉菜单以隐藏指定选项？

直接给<option>加display:none样式并触发chosen:updated无效，是因为Chosen不会监听样式变化，它是基于原<select>的选项属性（而非样式）来生成下拉列表的。正确的处理方式如下：

正确步骤 #

1. 给目标选项添加**hidden属性**（符合HTML标准，Chosen能识别这个状态）
2. 在对应的<select>元素上正确触发Chosen的更新事件

原生JS代码示例 #

// 找到要隐藏的选项，添加hidden属性
document.getElementById('sec1').setAttribute('hidden', true);

// 在select元素上触发chosen:updated事件，触发Chosen重新渲染
document.getElementById('course').dispatchEvent(new Event('chosen:updated'));

jQuery代码示例（项目使用jQuery时） #

// 给目标选项添加hidden属性
$('#sec1').attr('hidden', true);

// 触发更新事件
$('#course').trigger('chosen:updated');

为什么之前的方法无效？ #

Chosen初始化时会把原<select>的选项复制到它自己生成的独立DOM结构中，直接修改原选项的display:none样式，Chosen无法感知到这个变化。只有当原选项的属性（如hidden、disabled）发生改变，再触发chosen:updated，Chosen才会重新渲染下拉列表，同步最新的选项状态。

额外提醒 #

你提供的代码里有两个选项用了相同的id="sec2"，这不符合HTML规范（id必须唯一），会导致后续操作时只能选中第一个匹配的元素，建议修正这个问题。

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