Ajax实现级联下拉框编辑时子分类值无法正常回填问题

子分类编辑回填失效的核心原因是：JS代码主动给下拉框设置selected属性的操作，不会自动触发元素绑定的change事件，导致你写在change回调里的子分类加载、回填逻辑根本没有执行，子分类下拉框内没有对应选项，自然无法显示选中的历史值。

具体逻辑断层：

• 页面初始化时主分类Ajax加载完成后，你通过代码直接设置了主分类的选中值，这个DOM属性修改操作不会触发绑定的change回调
• 子分类的清空、加载、回填、启用全量逻辑都写在主分类的change回调中，回调未触发时子分类始终保持初始禁用+空选项状态
• 现有逻辑还有隐藏bug：${product != null}是服务端渲染时就生成的静态布尔值，后续用户手动切换主分类时这个判断依然成立，会错误尝试选中已经不存在的历史子分类值

1. 主分类加载完成并设置完选中值后，手动触发一次change事件，激活子分类加载流程
2. 增加回填标记，避免后续用户手动切换主分类时错误赋值历史子分类值
3. 补全子分类加载过程中的禁用/启用状态切换，优化交互体验

修复后主分类加载代码 #

$.ajax({
    url: "listmaindropdown",
    type: "GET",
    dataType: "json",
    success: function(loadmaindropdown) {
        const mainDropdown = $("#home_main_cat_dropdown_id");
        mainDropdown.empty(); // 加载前先清空避免重复选项

        $.each(loadmaindropdown, function(index, category) {
            $("<option>").val(category.m_id).text(category.main_category).appendTo(mainDropdown);
        });
                    
        if (${product != null}) {   
            // 直接用val方法设置选中值，写法更简洁
            mainDropdown.val('${product.home_main_category}');
            // 核心修复：手动触发change事件，加载对应子分类
            mainDropdown.trigger('change');
        }
    }
})

修复后子分类加载代码 #

$("#home_main_cat_dropdown_id").change(function() {
    const mainCategoryId = this.value;
    const subDropdown = $("#home_sub_cat_dropdown_id");
    // 加载过程中先禁用下拉框，避免误操作
    subDropdown.prop('disabled', true).empty();
        
    $.ajax({
        url: "listsubdropdown",
        type: "GET",
        data: { s_id: mainCategoryId }, // 用对象格式传参，自动处理编码
        dataType: "json",
        success: function(loadsubdropdown) {    
            $.each(loadsubdropdown, function(index, category) {
                $("<option>").val(category.m_id).text(category.sub_category).appendTo(subDropdown);
            });

            // 仅编辑场景首次加载时执行回填，后续手动切换不触发
            if (${product != null} && !window.subCategoryInitCompleted) {
                subDropdown.val('${product.home_sub_category}');
                window.subCategoryInitCompleted = true; // 标记回填完成
            }
            // 选项加载完成后启用下拉框
            subDropdown.prop('disabled', false);
        }
    });
});

额外优化建议 #

• 下拉框设置选中值优先用jQuery的.val()方法，不需要手动找option加selected属性，兼容性更好代码更简洁
• Ajax传参尽量用对象格式，不要手动拼接字符串，避免参数包含特殊字符时出现转义错误
• 级联下拉框异步加载子选项时，记得在加载过程中禁用子下拉框，加载完成再启用，避免用户点到空列表

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