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

本文介绍了一个纯前端实现的专业选择器，采用三级联动的方式让用户依次选择专业类别。该选择器无需依赖数据库，直接使用JSON格式的数据文件加载选项，并且提供了完整的代码实现。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
说明：数据部分是通过爬虫爬下来的，需要请到劲枫的博客下载

可以实现三级联动选择，代码可以直接使用。数据也是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">
        <!--输入的input id 设置为majorName-->
        <!--显示专业-->
        <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>