两个联动select2多选框 二级框选中选项后文本不显示 返回占位符

问题根源 #

• 当前使用的是Select2增强下拉组件，它并非直接渲染原生<select>元素，而是在原生表单控件基础上额外构建了一层独立的UI渲染层，内部维护了独立的选项缓存、选中状态映射。
• 现有代码直接通过jQuery操作原生select的DOM新增、删除option时，没有同步通知Select2实例更新内部状态，导致组件无法正确识别新增选项、无法渲染已选中的选项内容，最终显示默认占位符。
• 通用事件绑定$('select').change()会同时监听二级子下拉框的选中操作，当用户在二级框选中选项时，会误触发一级框的清空、重载二级选项的逻辑，直接覆盖用户刚选中的状态。
• 并行发送的多个异步子选项请求存在竞态，没有做选项去重，可能导致重复渲染相同选项。

修正实现步骤 #

1. 收窄事件监听范围：取消全select绑定的change事件，只监听一级Addons下拉框的变更，避免二级操作误触发重载逻辑
2. 异步结果统一收集渲染：不再每收到一个接口响应就直接append option，而是用临时集合收集所有选中Addons对应的子选项、自动去重后，一次性更新二级下拉的DOM
3. 主动同步Select2状态：更新完二级下拉的DOM后，触发Select2专属刷新事件，让组件重新读取原生select的所有选项、选中状态，重新渲染UI
4. 补全二级选中值的同步逻辑：监听二级下拉的change事件，将选中值同步到对应的隐藏域表单字段

修正后的完整脚本参考 #

// 只监听一级Addons下拉的变更，避免二级操作误触发逻辑
$('#multi-select-add-ons').on('change', function () {
    const selectedAddonIds = $(this).val() || [];
    // 清空二级下拉现有选项
    const $subAddonSelect = $('#subAddons');
    $subAddonSelect.empty();
    // 同步一级选中值到隐藏域
    $('#resultAddons').val(selectedAddonIds.join(','));

    // 没有选中任何一级项时直接刷新Select2并返回
    if (selectedAddonIds.length === 0) {
        $subAddonSelect.trigger('change.select2');
        return;
    }

    // 用Set存储子选项，自动去重
    const collectedSubAddons = new Set();
    // 记录需要等待的请求数量
    let pendingRequestCount = selectedAddonIds.length;

    selectedAddonIds.forEach(addonId => {
        getSubAddonsByAddon(addonId, (subAddonList) => {
            // 收集当前返回的子选项
            subAddonList.forEach(item => {
                collectedSubAddons.add(JSON.stringify({
                    id: item.id,
                    name: item.name
                }));
            });
            pendingRequestCount--;

            // 所有请求都返回后，一次性渲染所有子选项
            if (pendingRequestCount === 0) {
                collectedSubAddons.forEach(itemStr => {
                    const item = JSON.parse(itemStr);
                    $subAddonSelect.append($('<option>', {
                        value: item.id,
                        text: item.name
                    }));
                });
                // 触发Select2专属刷新：仅同步组件内部状态，不触发原生change事件
                $subAddonSelect.trigger('change.select2');
            }
        });
    });
});

// 改造原有接口请求方法，增加回调传入子选项数据
function getSubAddonsByAddon(id, callback) {
    const baseUrl = 'http://localhost.test/add-ons/';
    const xhr = new XMLHttpRequest();
    xhr.open("GET", `${baseUrl}show/${id}/sub-add-ons`, true);
    xhr.setRequestHeader("Content-Type", "application/json");
        
    xhr.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            const res = JSON.parse(this.response);
            callback(res.data || []);
        }
    }
    xhr.send();
}

// 监听二级下拉的选中变更，同步值到隐藏域
$('#subAddons').on('change', function() {
    const selectedSubAddonIds = $(this).val() || [];
    $('#resultSubAddons').val(selectedSubAddonIds.join(','));
});

关键注意点 #

• 不要使用trigger('change')刷新Select2，这个会触发完整的change事件链，可能再次触发重载逻辑；要使用change.select2专属事件，仅让Select2同步DOM状态，不触发业务逻辑
• 二级下拉初始化时的那个空值<option value="0"></option>可以直接删掉，Select2的占位符功能会自动处理无选项的状态
• 如果需要保留用户之前在二级下拉选中的值，在重载选项后可以通过$('#subAddons').val(previousSelectedIds).trigger('change.select2')重新回填选中状态，避免重载时丢失已选值。

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