Ajax实现两个下拉框的联动

<div class="form-group ">
                            <select name="oldPrice" class="form-control" id="idGoodsTypeBig" style="width: 35%; float: left;" οnchange="selectType()" >
                                <option value='-1'>--请选择一级分类--</option>
                            </select>
                            <select name="oldPrice" class="form-control" id="idGoodsTypeSmall" style="width: 35%; float: left;margin-bottom: 14px">
                                <option value='-1'>--请选择二级分类--</option>
                            </select>
                        </div>

js代码：
进入页面的时候先初始化父级下拉框

   $(function () {
        queryList();
        //  
        $('#addModal').on('hide.bs.modal', function () {
                //  清空模态框里的内容
                document.getElementById("form").reset();
                //  
                // initParentSelec
                //  
                $("#idGoodsTypeSmall").html("<option value='-1'>--请选择二级分类--</option>");
        });
        //  初始化父下拉框
        initParentSelect();
    });

Ajax请求初始化父级下拉框的列表

function initParentSelect(){
            $.ajax({
            type:"get",
            contentType:"application/json",
            url:getGoodsTypeUrl,
            success: function(res){
                console.log(res);
                if (res.code === 0){
                    //  请求成功之后  需要解析数据 反显到HTML中
                    formatSelectionJS(res.data,"idGoodsTypeBig");
                } else {
                    swal("选择失败！", "error");  //初始化 父下拉框
                }
            },
            error: function (res){
                console.log(res)
                swal("初始化 父下拉框错误！", "error");
            }
        });
        }

Ajax请求初始化子级下拉框的列表

function getChildGoodsType(parentType){
            $.ajax({
            type:"get",
            data:{
                parentType:parentType
            },
            contentType:"application/json",
            url:getChildGoodsTypeUrl,
            success: function(res){
                if (res.code === 0){
                    //  请求成功之后  需要解析数据 反显到HTML中
                    formatSelectionJS(res.data,"idGoodsTypeSmall");
                } else {
                    swal("选择失败！", "error");  
                }
                
            },error: function (res){
                swal("初始化 子下拉框错误！", "data.msg", "error");
            }
        });
        }

将子级分类的数据列表添加到option标签中

function formatSelectionJS(dataList,id){
            let resJS = "";
            if("idGoodsTypeSmall" === id){
                resJS = "<option value='-1'>--请选择二级分类--</option>"
            }else{
                resJS = "<option value='-1'>--请选择一级分类--</option>"
            }
           
            for (let i = 0; i < dataList.length; i++) {
                const obj = dataList[i];
                resJS +="<option value='"+obj.type+"'>"+obj.msg+"</option>";
            }
            $("#"+id).html(resJS);
        }

queryList方法

function queryList() {
        $.ajax({
            type: "GET",
            url: getAllGoodsUrl,
            data: {
                userId: localStorage.getItem(keyUserID)
            },
            dataType: "json",
            success: function (data) {
                // === 类型和数值
                if (data.code === 0) {
                    //  查询成功    再看一遍这个查询到的结果
                    dataList = data.data;
                    formatGoodList();//将获取的商品数据插入到界面的表格中
                } else {
                    swal("查询失败!", data.msg, "error");
                }
            },
            error: function (data) {
                swal("查询错误!", "请检查您的网络是否正常", "error");
            }
        });
    }

实现两个下拉框的联动

function selectType(){   //onchange方法
        var options=$("#idGoodsTypeBig option:selected");
        getChildGoodsType(options.val());
    }