使用jQuery Cascading Dropdown库：按钮触发选中下拉框值失效求助

我正在开发基于API返回值动态填充的级联下拉框，采用jquery-cascading-dropdown库，该库开箱即用表现良好。但尝试通过按钮点击事件触发选中下拉框的指定值时，设置的两个按钮仅首次点击可正常选中，后续点击无响应。

相关代码 #

const editBtn = document.querySelectorAll('.editButton');
for (const button of editBtn) {
    button.addEventListener('click', (e) => {
        let make = e.target.dataset.make
        
        $("#dropdowns").cascadingDropdown({
            selectBoxes: [{
              selector: '.step1',
              source: function (request, response) {
                $.getJSON("https://private-anon-f7832ff619-carsapi1.apiary-mock.com/cars", request, function (data) {
                  response($.map(data, function (item, index) {
                    return {
                      label: item.make,
                      value: item.make,
                    };
                  }));
                }).done(function () {
                  $("#make").val(make).change();
                }).fail(function () {
                  alert("unable to load data for dropdown make");
                });
              },
            }]
        });

    });
}

问题核心是每次点击按钮都重复初始化cascadingDropdown插件，这会覆盖之前的实例绑定，导致后续操作失效。只需调整两点：

• 将插件初始化代码移到按钮点击事件外部，仅执行一次
• 点击按钮时直接操作已初始化的下拉框，设置选中值并触发变更事件

修改后的代码：

// 仅初始化一次级联下拉框
$("#dropdowns").cascadingDropdown({
    selectBoxes: [{
        selector: '.step1',
        source: function (request, response) {
            $.getJSON("https://private-anon-f7832ff619-carsapi1.apiary-mock.com/cars", request, function (data) {
                response($.map(data, function (item, index) {
                    return {
                        label: item.make,
                        value: item.make,
                    };
                }));
            }).fail(function () {
                alert("无法加载品牌下拉框数据");
            });
        },
    }]
});

// 绑定按钮点击事件
const editBtn = document.querySelectorAll('.editButton');
for (const button of editBtn) {
    button.addEventListener('click', (e) => {
        let make = e.target.dataset.make;
        // 设置选中值并触发change事件，插件自动处理后续逻辑
        $("#make").val(make).change();
    });
}

关键说明 #

• 插件初始化只需执行一次，重复初始化会破坏已有的事件监听和实例状态
• 触发change事件后，cascadingDropdown会自动调用对应的source方法加载关联数据，无需重新初始化插件

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