如何在使用 Chosen 插件时动态更新多选下拉框选项

来源：网站建设作者：灯下变量头衔：程序员

导读：本期聚焦于小伙伴创作的《如何在使用 Chosen 插件时动态更新多选下拉框选项》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何在使用 Chosen 插件时动态更新多选下拉框选项》有用，将其分享出去将是对创作者最好的鼓励。

在使用Chosen插件构建多选下拉框时，很多开发者会遇到一个经典问题：通过JavaScript动态添加或删除select元素中的option后，界面上的Chosen组件没有同步更新。这主要是因为Chosen在初始化后会缓存选项结构和DOM状态，直接操作原始select并不会触发Chosen的内部刷新。本文将从原理出发，提供多种可靠的解决方案，并附上可直接运行的代码示例。

问题原因与解决思路

Chosen组件在初始化时读取select元素的option列表并渲染成自定义的

$('#mySelect').append('<option value="new">新选项</option>');

select

option

使用Chosen的destroy和chosen()重新初始化 – 简单粗暴，但会丢失选中状态和事件绑定。
调用Chosen提供的trigger('chosen:updated')事件 – 推荐方式，保持组件状态。

准备工作：基础HTML与初始化

首先创建一个标准的多选下拉框，并初始化Chosen。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态更新Chosen示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.jquery.min.js"></script>
</head>
<body>
    <!-- 多选下拉框 -->
    <select id="mySelect" multiple style="width:350px;">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
    </select>
    <button id="addOptionBtn">添加新选项</button>
    <button id="removeAllBtn">清空所有选项</button>

    <script>
        // 初始化Chosen
        $('#mySelect').chosen({
            width: '350px',
            placeholder_text_multiple: '请选择水果'
        });
    </script>
</body>
</html>

上述代码已经准备了一个多选下拉框和两个操作按钮。接下来我们分别实现添加和清空功能，并保证Chosen正确刷新。

方法一：使用 trigger('chosen:updated') 推荐

Chosen自1.0版本起支持chosen:updated自定义事件。当你修改完select的option后，只需在原始select上触发该事件，Chosen就会重新渲染。

添加选项示例

$('#addOptionBtn').on('click', function() {
    var select = $('#mySelect');
    // 动态添加新选项
    select.append('<option value="grape">葡萄</option>');
    // 触发Chosen更新
    select.trigger('chosen:updated');
});

注意：如果添加option时想设置selected属性使其默认选中，只需在option标签中加入selected，然后触发更新即可。

清空所有选项并新增子集

如果需要完全替换选项列表，可以清空select后批量添加，再触发更新。

$('#removeAllBtn').on('click', function() {
    var select = $('#mySelect');
    select.empty(); // 清空所有option
    // 重新添加几个选项
    select.append('<option value="watermelon">西瓜</option>');
    select.append('<option value="peach">桃子</option>');
    // 触发更新
    select.trigger('chosen:updated');
});

使用trigger('chosen:updated')的优势在于：Chosen会保留已经选中的选项（如果它们在新的option列表中依然存在），以及保持当前搜索框状态等细节。

方法二：销毁并重新初始化备选方案

对于某些老版本的Chosen或特殊场景，可能不支持chosen:updated事件。此时可先用destroy方法销毁组件，然后再次调用chosen()。但要注意，这会丢失所有用户当前的选中状态和自定义配置。

// 销毁再重建（不推荐，除非版本不支持chosen:updated）
function refreshChosenWithDestroy(selectSelector) {
    var $select = $(selectSelector);
    // 保存当前选中值（如果需要保留）
    var selectedValues = $select.val() || [];
    // 销毁Chosen
    $select.chosen('destroy');
    // 修改option（此处假设外部已经修改完毕）
    // 重新初始化
    $select.chosen({
        width: '350px',
        placeholder_text_multiple: '请选择水果'
    });
    // 恢复选中状态（可选）
    $select.val(selectedValues).trigger('chosen:updated');
}

可以看到，即便使用销毁重建，最终还是要借助trigger('chosen:updated')来恢复选中值。因此，直接使用第一种方法才是更优解。

完整示例代码

下面给出一个完整的可运行页面，包含两种按钮的完整逻辑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chosen动态更新完整示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.jquery.min.js"></script>
</head>
<body>
    <h3>多选下拉框动态更新测试</h3>
    <select id="fruitSelect" multiple style="width:350px;">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
    </select>
    <br/><br/>
    <button id="addGrape">添加葡萄选项</button>
    <button id="replaceAll">替换为西瓜和桃子</button>
    <button id="clearAll">清空所有选项</button>

    <script>
        $(function() {
            // 初始化
            $('#fruitSelect').chosen({
                width: '350px',
                placeholder_text_multiple: '请选择水果'
            });

            // 1. 添加单个选项
            $('#addGrape').click(function() {
                var $sel = $('#fruitSelect');
                // 避免重复添加
                if ($sel.find('option[value="grape"]').length === 0) {
                    $sel.append('<option value="grape">葡萄</option>');
                    $sel.trigger('chosen:updated');
                } else {
                    alert('葡萄选项已存在');
                }
            });

            // 2. 完全替换选项
            $('#replaceAll').click(function() {
                var $sel = $('#fruitSelect');
                $sel.empty();
                $sel.append('<option value="watermelon">西瓜</option>');
                $sel.append('<option value="peach">桃子</option>');
                $sel.trigger('chosen:updated');
            });

            // 3. 清空所有选项
            $('#clearAll').click(function() {
                var $sel = $('#fruitSelect');
                $sel.empty();
                $sel.trigger('chosen:updated');
            });
        });
    </script>
</body>
</html>

常见问题与注意事项

确保在DOM操作完成后才触发chosen:updated，不要在异步回调未结束时触发。
如果使用val()方法设置选中值，也必须先修改完option再设置val，最后触发更新，顺序不能乱。
当选项列表完全变更后，之前选中的值可能不在新列表中，Chosen会自动取消这些选项，无需手动处理。
注意Chosen版本：1.0以上都支持chosen:updated事件，如果你的项目依然用0.x版本，请升级或改用destroy方式。
动态添加的选项若要包含data-*自定义属性，Chosen默认不会渲染到UI上，可以调用trigger('chosen:updated')后再通过Chosen的.chosen().data('chosen')手动处理。

总结

动态更新Chosen多选下拉框的方案已经清晰：最推荐的方法是直接修改select的option，然后在select元素上触发chosen:updated事件。这种方法既简单又不会破坏Chosen的内部状态，是官方推荐的做法。只要你遵循修改DOM → 触发事件的顺序，就能确保界面与数据始终保持一致。如果项目中仍有旧版Chosen，可以考虑升级或使用destroy重建的备选方案，但务必注意处理选中状态的恢复。希望本文能帮你彻底解决Chosen动态刷新的困惑。

Chosen插件动态更新选项多选下拉框 jQuery select选项刷新修改时间：2026-06-08 18:18:34

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。