标题显示的多级联动

多级联动

当我们制作菜单栏选择时，选定一个属性然后选择下一个属性，最后进行联动：
中国→四川→成都→金牛区

注：中国是一级父目录

1
首先通过一级父目录获取省级的Id

        //通过PID的当前I的，获取当前PID下的所属级别的地区信息
        function getDataByPid(parent_id) {
            data = null;
            $.ajax({
                url: "/ssm/getDistrictListByPid.do", //请求地址
                type: "post",//请求方式
                data: {
                    pid: parent_id
                },
                dataType: "JSON",	//接收数据类型
                async: false,        //关闭异步执行,防止页面加载完毕，数据未全部接收，导致数据丢失
                success: function (result) {
                    data = result;    //将接收的值赋给data返回
                },
                error: function (e) {

                    console.log(e);
                }
            })
            return data;
        }

注：这里要将async设置为fasle 原因：使用AJAX请求数据，系统会另外开启一条线程去执行获取数据，关闭异步处理，防止数据未请求完数据已经已经加载完，导致数据丢失

2.初始化省的信息

 function pageInit() {
            districtlist = getDataByPid(0) //这里的第一级父级元素默认确认一个国家，传入的0代表是省级级别，获取国家下所有省级城市
            $("select[name='district_province']").empty //将下拉框清空,这里没有给下拉框设置I的，直接选择select这行标签里的元素清空
            str = "<option value='0'>请选择省份</option>";
            //对获取的districtlist进行遍历
            for (var i = 0; i < districtlist.length; i++) {
                str += "<option value='" + districtlist[i].id + "'>";
                str += districtlist[i].name;
                str += "</option>";
            }
            $("select[name='district_province']").append(str);//将获取到省份信息插入到下拉框中
        }

创建文档就绪函数

在文档就绪函数中进行各个省与市与区的联动设置
首先获取省的id作为市的父id,再用市的ID来作为区的父ID
接下来直接上代码：

$(document).ready(function() {
        pageInit();//将获取的省级信息放入文档就绪函数中，只要用户进入这个界面就开始加载
        $("select[name='district_province']").change(function () {
            $("select[name='district_city']").empty() //获取省份信息后，清空市级下拉框
            $("select[name='districtId']").empty()//清空区丶县级下拉框
            pid = $(this).val()//获取当前下拉框的val值即省级ID作为查询市级的父Id
            console.log(pid)
            result = getDataByPid(pid)
            console.log(result)
            str = "<option value='0'>请选择市 </option>";
            for (var i = 0; i < result.length; i++) {
                str += "<option value='" + result[i].id + "'>";
                str += result[i].name;
                str += "</option>";
            }
            $("select[name='district_city']").append(str);
        });
        //区与市进行绑定进行联动
        $("select[name='district_city']").change(function () {
        	alert("城市改变了")
            $("select[name='districtId']").empty();
            pid = $(this).val();
            result = getDataByPid(pid);
            str = "<option value='0'> 请选择区 </option>";
            for (var i = 0; i < result.length; i++) {
                str += "<option value='" + result[i].id + "'>";
                str += result[i].name;
                str += "</option>";
            }
            $("select[name='districtId']").append(str);
        });
        //最后将我们需要显示的信息与最后选择的区进行绑定实现多级联动
        $("select[name='districtId']").change(function () {
            $("#tbody").empty();//清空显示区域
            districtId = $(this).val();//获取当前城市下拉框中当前选择中值得value
            $.ajax({
                url: '/ssm/getCompanyListById.do',
                type: 'post',
                data: {
                    districtId: districtId
                },
                dataType: 'JSON',
                success: function (result) {
                    str = "";
                    for (var i = 0; i < result.length; i++) {
                        str += "<tr>";
                        str += "<td>" + result[i].id + "</td>"
                        str += "<td>" + result[i].name + "</td>"
                        str += "<td>" + result[i].introduce + "</td>"
                        str += "<td>" + result[i].post + "</td>"
                        str += "<td>" + result[i].num + "</td>"
                        str += "<td>" + result[i].salary + "</td>"
                        str += "</tr>";
                    }
                    $("#tbody").append(str);
                },
                error: function (e) {
                    console.log(e);
                    alert("网络异常");
                }
            });

        });
	})

遇到的坑：
**

1. 一定注意AJAX中URL请求地址是否与controller中的请求地址相匹配
2. 进行关联设置的时候使用.change(function(){})
3. 还有就是中间的一些代码拼接是否正确
4. 剩余没发现的坑就是代码书写格式不正确，这个通过debug慢慢找吧

**