jQuery实现Multiselect onChange事件动态追加Select选项的问题及需求

看起来你遇到的核心问题是异步AJAX的执行顺序混乱加上未清空旧选项导致的，而且其实你完全不需要发起AJAX请求——因为多选框里已经有你需要的所有数据了！

问题根源拆解 #

1. 异步AJAX的时序问题：你在循环里发起多个AJAX请求，但$("#meeting_ranch_location").selectpicker('refresh')会在所有请求完成前就执行，这就导致部分选项还没来得及追加就刷新了选择器，出现选项数量不对的情况。
2. 未清空旧选项：每次触发multiRanchFields时，你没有先清空目标下拉框里已有的选项，所以重复选择时会不断追加旧选项，造成重复。
3. 冗余的AJAX请求：多选框的选中选项已经包含了value（牧场ID）和text（牧场名称），完全可以直接从DOM中读取，不需要再请求后端获取。

修复后的代码 #

直接修改你的JavaScript函数即可，去掉AJAX请求，改用DOM读取的方式：

function multiRanchFields() {
    // 1. 先清空目标下拉框的所有旧选项（保留默认空选项的话重新追加一次）
    $("#meeting_ranch_location").empty().append('<option></option>');
    
    // 2. 获取多选框中选中的所有选项元素
    const selectedRanches = $('#ranch option:selected');
    
    // 3. 遍历选中的选项，直接追加到目标下拉框
    selectedRanches.each(function() {
        const ranchId = $(this).val();
        const ranchName = $(this).text();
        $("#meeting_ranch_location").append(`<option value="${ranchId}">${ranchName}</option>`);
    });
    
    // 4. 最后刷新selectpicker，确保UI同步更新
    $("#meeting_ranch_location").selectpicker('refresh');
}

代码说明 #

• 清空旧选项：用empty()先清空目标下拉框，从根源避免重复追加；如果需要保留默认的空选项，清空后再重新追加一次即可。
• 直接读取DOM数据：从多选框的选中选项里直接拿val()和text()，完全不需要后端请求，既提升性能又彻底避免异步时序问题。
• 同步执行逻辑：所有操作都是同步的，执行顺序完全可控，不会出现选项数量不符的情况。

特殊场景优化（必须用AJAX的情况） #

如果你因为某些原因必须保留AJAX请求（比如需要从后端获取额外数据），那你需要用Promise.all()来等待所有AJAX请求完成后再刷新选择器，同时也要先清空旧选项：

async function multiRanchFields() {
    // 先清空旧选项
    $("#meeting_ranch_location").empty().append('<option></option>');
    
    const ranchIds = $('#ranch').val();
    if (!ranchIds || ranchIds.length === 0) {
        $("#meeting_ranch_location").selectpicker('refresh');
        return;
    }
    
    // 用Promise.all等待所有AJAX请求完成
    const requests = ranchIds.map(id => {
        return $.ajax({
            url: `/get_ranch_name/${id}`,
            method: 'GET'
        }).then(response => {
            return { id, name: response.name };
        });
    });
    
    const results = await Promise.all(requests);
    
    // 遍历结果追加选项
    results.forEach(item => {
        $("#meeting_ranch_location").append(`<option value="${item.id}">${item.name}</option>`);
    });
    
    // 最后刷新选择器
    $("#meeting_ranch_location").selectpicker('refresh');
}

这样就能保证所有请求完成后再更新UI，同时避免重复选项。

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