Select2无法触发原生select的change事件问题求助

问题根源 #

Select2会替换原生<select>元素的显示结构，将原生元素隐藏后自行渲染一套UI。此时直接绑定在原生<select>上的change事件可能无法被正确触发——因为用户交互的是Select2生成的DOM，而非原生控件。同时，当你动态更新原生<select>的选项后，Select2不会自动感知到变化，也会导致后续交互异常。

修复方案 #

1. 初始化Select2控件 #

在JS代码末尾，对需要启用搜索功能的下拉框初始化Select2：

// 初始化所有目标下拉框的Select2功能
$('#level1, #level2, #level3, #level4, #level5, #level6, #level7').select2();

2. 替换原生change事件绑定逻辑 #

修改DropDown类add方法中的事件绑定部分，同时支持Select2专属事件和原生事件：

// 替换原有的 depEl.addEventListener("change",eventFunction);
targetObject.elsDependsOn.forEach(depEl => {
  // 监听Select2的选择完成事件
  $(depEl).on('select2:select', eventFunction);
  // 保留原生change事件，兼容未初始化Select2的场景
  depEl.addEventListener("change", eventFunction);
});

3. 动态更新选项后通知Select2刷新 #

在populateDropDown方法中，更新完原生<select>选项后，触发Select2的更新机制：

populateDropDown(el,listAsArray){
    el.innerHTML = "";

    listAsArray.forEach(item => {
        const option = document.createElement("option");
        option.textContent = item;
        el.appendChild(option);
    });
    // 新增：通知Select2重新读取选项数据
    if ($(el).data('select2')) {
        $(el).trigger('change.select2');
    }
}

4. 处理禁用状态切换 #

对于初始禁用的下拉框（如level4-level7），当它们被启用时，需要同步初始化Select2：

// 示例：启用level4并初始化Select2
const level4El = document.getElementById('level4');
level4El.disabled = false;
$(level4El).select2();

完整修改后的JS代码 #

class DropDown {

    constructor(data){
        this.data = data;
        this.targets = [];
    }

    filterData(filtersAsArray){
        return this.data.filter(r => filtersAsArray.every((item,i) => item === r[i]));
    }

    getUniqueValues(dataAsArray,index){
        const uniqueOptions = new Set();
        dataAsArray.forEach(r => uniqueOptions.add(r[index]));
        return [...uniqueOptions];
    }

    populateDropDown(el,listAsArray){
        el.innerHTML = "";
    
        listAsArray.forEach(item => {
            const option = document.createElement("option");
            option.textContent = item;
            el.appendChild(option);
        });
        // 通知Select2更新选项
        if ($(el).data('select2')) {
            $(el).trigger('change.select2');
        }
    }

    createPopulateDropDownFunction(el,elsDependsOn){
        return () => {
        const elsDependsOnValues = elsDependsOn.length === 0 ? null : elsDependsOn.map(depEl => depEl.value);
        const dataToUse = elsDependsOn.length === 0 ? this.data : this.filterData (elsDependsOnValues);
        const listToUse = this.getUniqueValues(dataToUse, elsDependsOn.length); 
        this.populateDropDown(el,listToUse);
        }
    }

    add(options){
        //{target: "level2", dependsOn: ["level1"] }
        const el = document.getElementById(options.target);
        const elsDependsOn = options.dependsOn.length === 0 ? [] : options.dependsOn.map(id => document.getElementById(id));
        const eventFunction = this.createPopulateDropDownFunction (el, elsDependsOn);
        const targetObject = { el: el, elsDependsOn: elsDependsOn,func: eventFunction};
        // 替换事件绑定，兼容Select2
        targetObject.elsDependsOn.forEach(depEl => {
            $(depEl).on('select2:select', eventFunction);
            depEl.addEventListener("change", eventFunction);
        });
        this.targets.push(targetObject);
        return this;
    }

    initialize(){
        this.targets.forEach(t => t.func());
        return this;
    }

    eazyDropDown(arrayOfIds){
        arrayOfIds.forEach((item,i) =>{
            const option = {target: item, dependsOn: arrayOfIds.slice(0,i) }
            this.add(option);
        });
        this.initialize();
        return this;
    }

}
var dd = new DropDown(myData).eazyDropDown(["level1","level2","level3","level4","level5","level6","level7","level8"])

// 初始化Select2控件
$('#level1, #level2, #level3, #level4, #level5, #level6, #level7').select2();

额外说明 #

• Select2的select2:select事件在用户完成选择时触发，和原生change事件的触发时机略有差异，但能覆盖绝大多数交互场景。
• 若需要修改下拉框的禁用状态，需同步调用Select2的状态方法，比如$(el).prop('disabled', true).select2('disable')（禁用）或$(el).prop('disabled', false).select2('enable')（启用）。

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