如何使用jQuery实现选择分类后自动预填充sub_category及sub_sub_category字段

问题根源 #

• 重复绑定事件：get_sub_sub_category函数每次调用都会给sub_category_id选择器新增change事件监听，多次调用会导致同一次触发执行多次请求
• 没有主动触发事件：动态填充完sub_category选项后，即使有默认选中的选项，也不会自动触发change事件，所以不会加载对应的sub_sub_category

修复代码 #

$(document).ready(function() {
    // 单独封装加载sub_sub_category的逻辑
    function loadSubSubCategory(sub_category_id) {
        if (sub_category_id) {
            $.ajax({
                url: "{{ url('/category/sub-sub-category/') }}/" + sub_category_id,
                type: "GET",
                dataType: "json",
                success: function (data) {
                    $('select[name="sub_sub_category_id"]').empty();
                    $.each(data, function (key, value) {
                        $('select[name="sub_sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_sub_category_name + '</option>');
                    });
                },
            })
        } else {
            $('select[name="sub_sub_category_id"]').empty();
            alert('danger');
        }
    }

    // 仅在初始化时绑定一次sub_category的change事件
    $('select[name="sub_category_id"]').on('change', function () {
        loadSubSubCategory($(this).val());
    });

    $('select[name="category_id"]').on('change', function() {
        var category_id = $(this).val();
        if(category_id) {
            $.ajax({
                url: "{{ url('/category/sub-category/') }}/" + category_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('select[name="sub_sub_category_id"]').empty();
                    const subCategorySelect = $('select[name="sub_category_id"]').empty();

                    $.each(data, function(key, value) {
                        subCategorySelect.append('<option value="'+ value.id +'">' + value.sub_category_name + '</option>');
                    });

                    // 填充完二级分类后主动触发change事件，自动加载对应三级分类
                    subCategorySelect.trigger('change');
                },
            })
        } else {
            $('select[name="sub_category_id"]').empty();
            $('select[name="sub_sub_category_id"]').empty();
            alert('danger');
        }
    });
});

核心修改说明 #

• 把加载三级分类的逻辑抽成独立的loadSubSubCategory函数，避免重复绑定事件
• sub_category的change事件只在页面初始化时绑定一次，不会重复注册
• 二级分类选项填充完成后主动调用trigger('change')触发事件，不管二级分类有1个还是多个选项，都会自动加载对应的三级分类列表

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