jQuery実装「学科門類」、「学科大類(一級学科)」、「専門」(二級学科)を選択して三級連動を実現

データの部分は爬虫类を通じて(通って)下りてきたので、力枫のブログにダウンロードしてもらいます
3段階連動選択が可能で、コードは直接使用できます.データもjson形式で、ダウンロードして利用することができて、データベースに関わらないで、単純なフロントエンドの実現方式、効率はもっと高くて、サーバーに対する圧力はもっと小さいです

    
    
    








    

          ：
        
        
        
        
        
    











    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()

        }
    })