jQuery实现选择“学科门类”、“学科大类（一级学科）”、“专业”（二级学科）实现三级联动

「爱情、让人受尽委屈。」 2022-05-26 03:26 241阅读 0赞

# 说明：数据部分是通过爬虫爬下来的，需要请到[劲枫的博客][Link 1]下载 #

**可以实现三级联动选择，代码可以直接使用。数据也是json格式，下载下来就可用，不涉及数据库，单纯的前端实现方式，效率更高，对服务器压力更小**

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        ul li {
            list-style: none;
        }
    
        /*省和学校的选择框样式*/
        .majorClass {
            position: absolute;
            background-color: aliceblue;
            width: 580px;
            /*height: 255px;*/
            border: 1px solid #72B9D7;
            top: 45px;
            left: 0;
            z-index: 1000;
        }
    
        .majorClass .majorSelect {
            width: 550px;
            height: 30px;
            margin: 6px 0 6px 15px;
        }
    
        .majorClass .majorSelect select {
            width: 136px;
            /*display: inline-block;*/
            height: 30px;
            line-height: 30px;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
    
        .majorClass .majorSelect input {
            /*display: inline-block;*/
            width: 230px;
            height: 30px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    
        }
    
        .majorClass .majorList {
            padding: 5px 15px;
            margin-bottom: 6px;
            font: 12px "微软雅黑";
            background: #FFF;
            width: 550px;
            height: 205px;
            margin-left: 15px;
            overflow-y: auto;
            border: 1px solid #72B9D7;
        }
    
        .majorClass .majorList ul {
            width: 510px;
        }
    
        .majorClass .majorList ul li {
            float: left;
            width: 158px;
            height: 22px;
            margin-left: 6px;
            padding-left: 6px;
            line-height: 22px;
            cursor: pointer;
        }
    
        .majorClass .majorList ul li.DoubleWidthLi {
            width: 328px;
        }
    
        .majorClass .majorList ul li:hover {
            background: #72B9D7;
        }
    
        .majorClass .button {
            width: 100%;
            height: 40px;
            margin-top: 5px;
        }
    
        .majorClass .button button {
            float: right;
            height: 30px;
            margin-right: 20px;
            padding: 4px 10px;
            border: none;
            font-weight: 600;
            /*cursor: pointer;*/
        }
    
        /*省和学校的选择框样式*/
    
    </style>
    <body>
    <div class="container stage">
    
    
        <div class="input-group input-group-lg " style="width: 400px;">
            <span class="input-group-addon">专业：</span>
            <input id="majorName" name="major" readonly style="background-color: #fff;" type="text" class="form-control form-control-new" placeholder="Major">
            
            
            <div id="majorClass" class="majorClass" hidden>
                <div id="majorSelect" class="majorSelect">
                    <select id="select1"></select>
                    <select id="select2"></select>
                    <span>可选择其他手动填写</span>
                    <input type="text" hidden>
    
                    <div class="button" style="display: inline">
                        <button type="button" class="btn btn-info" value="1" flag="1">确定</button>
                        <button type="button" class="btn" value="0" flag="0">取消</button>
                    </div>
    
                </div>
    
                <div class="majorList">
                    <ul>
                    </ul>
                </div>
    
    
            </div>
            
        </div>
    
    
    </div>
    
    
    </body>
    </html>
    
    <script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    
        var class1 = {
            下载的数据里面的dict1.json拷贝过来
        }
    
        var class2 = {
            下载的数据里面的dict2.json拷贝过来
        }
    
        var class3 = {
            下载的里面的ditc3.json拷贝过来
        }
    
        $("#majorName").focus(function () {
            $(".majorClass").show();
        });
    
    
        initClass_1();//初始化一级分类
        initClass_2();//初始化二级分类
        initClass_3()
    
        //切换一级分类的事件
        $("#majorSelect #select1").change(function () {
            if ("0000" != $(this).val()) {
                $(".majorSelect span").show();
                $(".majorSelect input").hide();
                $("#majorSelect select:nth-of-type(2)").show()
                $(".majorList").show()
    
    
                var selectedClass1_value = $(this).val();//获取选的class1的value
                // console.log(selectedClass1_value)
                //初始化二级分类列表
                initClass_2(selectedClass1_value);
    
    
    
    
                var selectedClass2_value = $("#majorSelect #select2").val();//获取选的class2的value 0101 0201 0202....
                // console.log(selectedClass2_value)
                var class3_arr_temp = [];//初始化三级专业列表
                for (var k in class3) {
                    if (k.substr(0, 4) == selectedClass2_value) {
                        class3_arr_temp[k] = class3[k]
                    }
                }
    
               initClass_3(class3_arr_temp);//刷数据到ul li 中
            } else {
                $(".majorList ul").html("");
                $(".majorSelect span").hide();
                $(".majorSelect input").show();
    
                $("#majorSelect select:nth-of-type(2)").hide()
                $(".majorList").hide()
    
            }
        })
    
    
           //切换二级分类的事件
        $("#majorSelect #select2").change(function () {
    
                var selectedClass2_value = $(this).val();//获取选的class2的value 0101 0201 0202....
                // console.log(selectedClass2_value)
                var class3_arr_temp = [];//初始化三级专业列表
                for (var k in class3) {
                    if (k.substr(0, 4) == selectedClass2_value) {
                        class3_arr_temp[k] = class3[k]
                    }
                }
    
               initClass_3(class3_arr_temp);//刷数据到ul li 中
    
        })
    
    
        function initClass_1() {
            //初始化一级分类的下拉列表
            var SelectStr_class1 = "";
            for (var k in class1) {
                SelectStr_class1 += "<option value='" + k + "'>" + class1[k] + "</option>" //进行select下拉列表字符串拼接
            }
            $("#majorClass #select1").html(SelectStr_class1);
        }
    
        function initClass_2() {
            //实现重载功能，因为第一次初始化的时候没有点击事件不传参数的，但是点击select的时候需要传递当前点击的值用来构建第二个下拉列表
            var len= arguments.length;//获取传递的参数个数
            var selectedClass1_value = ""
            if(len == 0){
                selectedClass1_value = $("#majorClass #select1").val();//获取选的省的value 01 02 03 ...
                // console.log("0")
            }else if(len ==1){
                selectedClass1_value = arguments[0]
                // console.log("1")
            }
    
            //初始化二级分类列表
            var SelectStr_class2 = ""
            var class2_arr = [];//初始化二级专业列表
            for (var k in class2) { //选择对应的class2中的数据存到class2_arr[]
                if (k.substr(0, 2) == selectedClass1_value) {
                    class2_arr[k] = class2[k]
                }
            }
    
            for (var k in class2_arr) {//从class2_arr将数据刷出来
                SelectStr_class2 += "<option value='" + k + "'>" + class2_arr[k] + "</option>" //进行select下拉列表字符串拼接
                // console.log(k)
            }
            $("#majorClass #select2").html(SelectStr_class2);
        }
    
    
    
    
    
    
    
        function initClass_3() {
    
            var len= arguments.length;//获取传递的参数个数
            var class3_arr = [];//初始化三级专业列表
    
            if(len == 0){
                var selectedClass2_value = $("#majorClass #select2").val();//获取选的class2的value 0101 0201 0202....
    
                for (var k in class3) {
                    if (k.substr(0, 4) == selectedClass2_value) {
                        class3_arr[k] = class3[k]
                    }
                }
            }else if(len ==1){
                class3_arr = arguments[0]//传递了参数获取第一个参数
            }
    
    
            var majorULlistr = "" //拼接专业的html代码
            for (var i in class3_arr) {
                // console.log(class2_arr[i])
                if (class3_arr[i] > 13) {
                    majorULlistr += "<li class='DoubleWidthLi'>" + class3_arr[i] + "</li>"
                } else {
                    majorULlistr += "<li>" + class3_arr[i] + "</li>"
                }
            }
            $(".majorList ul").html(majorULlistr)//拼接学校的html代码
            //学校列表点击事件
            $(".majorList ul li").bind("click", function () {
                $("#majorName").val($(this).html());
                $("#majorClass").hide();
            })
        }
    
    
    
        //按钮点击事件
        $(".button button").bind("click", function () {
            var flag = $(this).attr("flag");
            // var btnvalue = $(this).val()
            // console.log(typeof (btnvalue))
    
            if ("0" == flag) {
                $("#majorClass").hide()
            } else if ("1" == flag) {
                var selectedClass1_value = $("#majorSelect #select1").val()
                if ("0000" == selectedClass1_value) {
                    $("#majorName").val($("#majorSelect input").val());
                }
                $(".majorClass").hide()
    
            }
        })
    </script>

[Link 1]: https://download.csdn.net/download/tcf_jingfeng/10370666