JS(JQuery)实现动态三级级联下拉列表效果

---

实现效果

数据结构样式，采用json格式

HTML结构

<div class="text-c">
    仓库名称：
    <select class="select" style="width: 150px" size="1" name="ckno" id="ckno">
        <option value="" selected>请选择仓库</option>
    </select>
    专业名称：
    <select class="select" style="width: 150px" size="1" name="xmno" id="zyno">
        <option value="" selected>请选择专业</option>
    </select>
    项目名称：
    <select class="select" style="width: 150px" size="1" name="xmno" id="xmno">
        <option value="" selected>请选择项目</option>
    </select>
</div>

效果一：需要手动一级一级点开

            var data_select = [];
            //获取级联需要的json数据
            $.ajax({
                type: "post",
                url: "/admin/AdminHandler.ashx",
                data: { "operation": "GetCKZYXMList" },
                success: function (data, status) {
                    data_select = data;
                    for (var i = 0; i < data_select.ListCK.length; i++) {
                        $("#ckno").append("<option value='" + data_select.ListCK[i].CKNo + "'>" + data_select.ListCK[i].CKName + "</option>");
                    }
                },
            });

            $("#ckno").change(function () {
                //清空option
                $("#zyno").find("option").remove();
                $("#xmno").find("option").remove();
                $("#zyno").append("<option value='' selected>请选择专业</option>");
                $("#xmno").append("<option value='' selected>请选择项目</option>");
                var ckno_zy = $(this).val();
                if (ckno_zy != "") {
                    for (var i = 0; i < data_select.ListCK.length; i++) {
                        if (data_select.ListCK[i].CKNo == ckno_zy) {
                            for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
                                $("#zyno").append("<option value='" + data_select.ListCK[i].ZYList[j].ZYNo + "'>" + data_select.ListCK[i].ZYList[j].ZYName + "</option>");
                            }
                        }
                    }
                }
            });

            $("#zyno").change(function () {
                //清空option
                $("#xmno").find("option").remove();
                $("#xmno").append("<option value='' selected>请选择项目</option>");
                var ckno_zy = $('#ckno option:selected').val();
                var zyno_xm = $(this).val();
                for (var i = 0; i < data_select.ListCK.length; i++) {
                    if (data_select.ListCK[i].CKNo == ckno_zy) {
                        for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
                            if (data_select.ListCK[i].ZYList[j].ZYNo == zyno_xm) {
                                for (var k = 0; k < data_select.ListCK[i].ZYList[j].XMList.length; k++) {
                                    $("#xmno").append("<option value='" + data_select.ListCK[i].ZYList[j].XMList[k].XMNo + "'>" + data_select.ListCK[i].ZYList[j].XMList[k].XMName + "</option>");
                                }
                            }                           
                        }                       
                    }
                }
            });

效果二：点开上一级自动绑定全部下拉框

            $.ajax({
                type: "post",
                url: "/admin/AdminHandler.ashx",
                data: { "operation": "GetCKZYXMList" },
                success: function (data, status) {
                    data_select = data;
                    for (var i = 0; i < data_select.ListCK.length; i++) {
                        $("#ckno").append("<option value='" + data_select.ListCK[i].CKNo + "'>" + data_select.ListCK[i].CKName + "</option>");
                    }
                },
            });

            $("#ckno").change(function () {
                //清空option
                $("#zyno").find("option").remove();
                $("#xmno").find("option").remove();
                var ckno_zy = $(this).val();
                if (ckno_zy == "") {
                    $("#zyno").append("<option value='' selected>请选择专业</option>");
                    $("#xmno").append("<option value='' selected>请选择项目</option>");
                } else {
                    for (var i = 0; i < data_select.ListCK.length; i++) {
                        if (data_select.ListCK[i].CKNo == ckno_zy) {
                            for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
                                $("#zyno").append("<option value='" + data_select.ListCK[i].ZYList[j].ZYNo + "'>" + data_select.ListCK[i].ZYList[j].ZYName + "</option>");
                            }
                            for (var k = 0; k < data_select.ListCK[i].ZYList[0].XMList.length; k++) {
                                $("#xmno").append("<option value='" + data_select.ListCK[i].ZYList[0].XMList[k].XMNo + "'>" + data_select.ListCK[i].ZYList[0].XMList[k].XMName + "</option>");
                            }
                        }
                    }
                }
            });

            $("#zyno").change(function () {
                //清空option
                $("#xmno").find("option").remove();
                var ckno_zy = $('#ckno option:selected').val();
                var zyno_xm = $(this).val();
                for (var i = 0; i < data_select.ListCK.length; i++) {
                    if (data_select.ListCK[i].CKNo == ckno_zy) {
                        for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
                            if (data_select.ListCK[i].ZYList[j].ZYNo == zyno_xm) {
                                for (var k = 0; k < data_select.ListCK[i].ZYList[j].XMList.length; k++) {
                                    $("#xmno").append("<option value='" + data_select.ListCK[i].ZYList[j].XMList[k].XMNo + "'>" + data_select.ListCK[i].ZYList[j].XMList[k].XMName + "</option>");
                                }
                            }

                        }
                    }
                }
            });

解释一下这串代码：

最开始的第一个ajax是获取一整个json数据串的，然后直接绑定第一级的仓库。同时创建仓库和专业的change()方法。点击之后就会给下一级生成数据。

效果一和效果二的区别：效果一选中上一级下拉框后，不会强制给剩下的所有下拉框绑定数据，而是只会给下一级的下拉框绑定数据。只能一级一级的选择，不能越级操作。比如第一级下拉框选择了A[1]数据后，会给第二级下拉框默认赋上A[1].B[1]的数据，但是在第二级选择前，是不会给第三级下拉框进行默认赋值。

效果二则是选中上一级下拉框后，默认给下面的所有级别下拉框绑定第一个的默认数据。比如第一级下拉框选择了A[1]数据后。会给第二级下拉框默认赋上A[1].B[1]的数据，第三级绑定A[1].B[1].C[1]的数据。

具体怎么使用还是需要根据实际的需求和生产环境来选择不同的实现效果。