Bootstrap模态框切换首个下拉框时，第二个下拉框无法加载

嘿，我之前刚好碰到过一模一样的问题——DataTable行点击打开模态框，里面的依赖下拉框加载坑还真不少！咱们一步步拆解问题，看看怎么解决：

1. 把填充逻辑放在模态框完全渲染后执行 #

模态框是点击Edit才动态显示的，如果你在模态框还没完全渲染到DOM里就去操作下拉框，很可能会失效。正确的做法是把所有填充逻辑绑定到模态框的shown.bs.modal事件上——这个事件是模态框完全显示、所有DOM元素都渲染完毕后才触发的：

// 给模态框绑定显示完成事件，先解绑旧事件避免重复触发
$('#yourModal').off('shown.bs.modal').on('shown.bs.modal', function(e) {
    // 从Edit链接的data属性里拿到行ID（建议把行ID存在Edit的data-id里）
    var rowId = $(e.relatedTarget).data('id');
    
    // 调用WebService获取第一个下拉框的填充数据和选中值
    $.ajax({
        url: '/YourWebService.asmx/GetFirstDropdownData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ targetId: rowId }),
        dataType: 'json',
        success: function(res) {
            var firstDropdown = $('#firstDropdown');
            firstDropdown.empty();
            
            // 循环填充第一个下拉框的选项
            $.each(res.d.options, function(idx, item) {
                firstDropdown.append($('<option>', {
                    value: item.Value,
                    text: item.Text
                }));
            });
            
            // 设置选中值，然后手动触发change事件
            firstDropdown.val(res.d.selectedValue);
            firstDropdown.trigger('change');
        },
        error: function(xhr) {
            console.error('加载第一个下拉框失败:', xhr.responseText);
        }
    });
});

2. 用事件委托绑定第二个下拉框的依赖逻辑 #

如果你的模态框是动态生成的（或者一开始是隐藏状态），直接用$('#firstDropdown').change(...)绑定事件会失效——因为绑定的时候元素还没在DOM里。这时候必须用事件委托，把事件绑定到静态的父元素（比如document）上：

// 事件委托：监听第一个下拉框的change事件，确保动态元素也能触发
$(document).on('change', '#firstDropdown', function() {
    var selectedParentId = $(this).val();
    
    // 调用WebService获取第二个下拉框的依赖数据
    $.ajax({
        url: '/YourWebService.asmx/GetSecondDropdownData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ parentId: selectedParentId }),
        dataType: 'json',
        success: function(res) {
            var secondDropdown = $('#secondDropdown');
            secondDropdown.empty();
            
            // 填充第二个下拉框
            $.each(res.d, function(idx, item) {
                secondDropdown.append($('<option>', {
                    value: item.Value,
                    text: item.Text
                }));
            });
            
            // 如果需要设置默认选中值，这里可以从接口返回的结果里取
            // secondDropdown.val(res.d.selectedValue);
        },
        error: function(xhr) {
            console.error('加载第二个下拉框失败:', xhr.responseText);
        }
    });
});

3. 检查WebService接口的返回格式 #

很多时候问题出在后端接口上，要确保你的C# WebService返回的是标准JSON格式，记得给WebMethod加上[ScriptMethod(ResponseFormat = ResponseFormat.Json)]属性：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class YourWebService : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public DropdownResult GetFirstDropdownData(int targetId)
    {
        // 从数据库查询数据的逻辑
        var options = new List<DropdownItem>();
        // 填充options...
        var selectedValue = 123; // 从数据库拿到的选中值
        
        return new DropdownResult { options = options, selectedValue = selectedValue };
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<DropdownItem> GetSecondDropdownData(int parentId)
    {
        // 根据父ID查询子选项的逻辑
        return yourChildOptions;
    }
}

// 辅助类
public class DropdownItem
{
    public int Value { get; set; }
    public string Text { get; set; }
}

public class DropdownResult
{
    public List<DropdownItem> options { get; set; }
    public int selectedValue { get; set; }
}

4. 兜底：延迟触发change事件 #

如果前面的步骤都做了还是不行，可能是浏览器事件循环的问题——设置选中值后立即触发change，浏览器还没来得及处理下拉框的选项更新。这时候可以加个小延迟：

firstDropdown.val(res.d.selectedValue);
setTimeout(() => {
    firstDropdown.trigger('change');
}, 100);

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