jQuery切换用户时如何彻底清除多选框selSubjects2的原有选项？

问题分析 #

你的代码里已经调用了empty()，但仍出现选项追加的问题，大概率是这几个原因：

• 若#selUser是多选下拉框，$(this).val()返回的是数组而非字符串，直接split(',')的处理逻辑不够严谨；
• 若#selSubjects2用了Select2这类第三方下拉插件，仅调用empty()无法清空插件维护的缓存和选中状态；
• 事件被重复绑定，导致同一操作执行多次，出现"清空后又追加"的矛盾结果。

针对普通select的修正代码 #

$("#selUser").off('change keyup').on('change keyup', function() {
    const $targetSelect = $('#selSubjects2');
    // 彻底清空目标下拉的所有选项
    $targetSelect.empty();

    const selectedVals = $(this).val();
    // 统一处理单选/多选的取值，转成数组
    const valArray = Array.isArray(selectedVals) ? selectedVals : (selectedVals ? selectedVals.split(',') : []);

    if (valArray.length > 0) {
        valArray.forEach(val => {
            const option = new Option(val, val);
            option.selected = true;
            $targetSelect.append(option);
        });
    }

    $targetSelect.trigger("change");
});

针对Select2插件的修正代码 #

如果#selSubjects2是Select2实例，需要额外处理插件的状态：

$("#selUser").off('change keyup').on('change keyup', function() {
    const $targetSelect = $('#selSubjects2');
    // 先清空Select2的选中状态和缓存
    $targetSelect.val(null).trigger('change');
    // 再清空DOM层面的选项
    $targetSelect.empty();

    const selectedVals = $(this).val();
    const valArray = Array.isArray(selectedVals) ? selectedVals : (selectedVals ? selectedVals.split(',') : []);

    if (valArray.length > 0) {
        valArray.forEach(val => {
            const option = new Option(val, val);
            $targetSelect.append(option);
        });
        // 更新Select2的选项列表
        $targetSelect.trigger('change');
    }
});

关键修改点 #

1. 用on替代旧的bind方法，同时通过off先解绑重复的事件绑定，避免多次执行；
2. 统一处理单选/多选下拉的取值逻辑，确保遍历的是数组；
3. 针对Select2插件增加了专门的状态清空步骤，保证插件和DOM的状态一致。

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