jquery实现行业分类四级联动选择表单

一、效果图

二、数据结构

三、HTML代码

<form id="form">
        <div id="select-class" name="typeClass">
            <select name="main_business_type_0"  id="class-0">
                <option>请选择门类</option>
            </select>
            /
            <select name="main_business_type_1" id="class-1">
                <option>请选择大类</option>
            </select>
            /
            <select name="main_business_type_2" id="class-2">
                <option>请选择中类</option>
            </select>
            /
            <select name="main_business_type_3" id="class-3">
                <option>请选择小类</option>
            </select>
        </div>
    </form>

四、js代码

$("#select-class").each(function(){
            var temp_html ;
            var oClass_0 = $(this).find("#class-0")//门类
            var oClass_1 = $(this).find("#class-1")//大类
            var oClass_2 = $(this).find("#class-2")//中类
            var oClass_3 = $(this).find("#class-3")//小类
            var class_0_key_array = [] ;//门类键名组成的数组
            var class_1_key_array = [] ;//大类键名组成的数组
            var class_2_key_array = [] ;//中类键名组成的数组
            var class_0_selected_index = 0 ;
            var class_1_selected_index = 0 ;
            var class_2_selected_index = 0
            //初始化门类
            var class_0_init = function(){
                class_0_key_array = [] ;//初始化门类键名组成的数组
                $.each(classJson , function(key,value){
                    class_0_key_array.push(key) ;
                    temp_html += "<option value='"+value.trade_name+"'>"+value.trade_name+"</option>";
                });
                //渲染门类
                oClass_0.html(temp_html);
                //渲染完成后清空temp_html
                temp_html = "";
                //当门类被选择并初始化后,初始化大类
                class_1_init(class_0_key_array) ;
            };
            //初始化大类
            var class_1_init = function(class_0_key_array){
                //初始化大类键名组成的数组
                class_1_key_array = [] ;                
                //判断由上级往下传的key_array长度是否为0
                if (class_0_key_array.length != 0) {
                    //若key_array长度为0,则说明无需渲染此节点及更深节点,直接往下传空array
                    //若key_array长度不为0,则继续渲染
                    class_0_selected_index = oClass_0.get(0).selectedIndex;//选了第几个
                    $.each(classJson[class_0_key_array[class_0_selected_index]].children , function(key,value){
                        class_1_key_array.push(key) ;
                        temp_html += "<option value='"+value.trade_name+"'>"+value.trade_name+"</option>";
                    });
                }
                //渲染大类
                oClass_1.html(temp_html) ;
                //渲染完成后清空temp_html
                temp_html = "";
                //当大类被选择并初始化后,初始化中类
                class_2_init(class_1_key_array) ;
            };
            //初始化中类
            var class_2_init = function (class_1_key_array){
                //初始化中类键名组成的数组
                class_2_key_array = [] ;
                //判断由上级往下传的key_array长度是否为0
                if (class_1_key_array.length != 0) {
                    //若key_array长度为0,则说明无需渲染此节点及更深节点,直接往下传空array
                    //若key_array长度不为0,则继续渲染
                    class_1_selected_index = oClass_1.get(0).selectedIndex ;//选择了第几个
                    $.each(classJson[class_0_key_array[class_0_selected_index]].children[class_1_key_array[class_1_selected_index]].children , function(key,value){
                        class_2_key_array.push(key) ;
                        temp_html += "<option value='"+value.trade_name+"'>"+value.trade_name+"</option>";
                    });
                }
                //渲染中类
                oClass_2.html(temp_html);
                //渲染完成后清空temp_html
                temp_html = "";
                //当中类被选择并初始化后,初始化小类
                class_3_init(class_2_key_array) ;

            };
            //初始化小类
            var class_3_init = function(class_2_key_array){
                //初始化小类键名组成的数组
                class_3_key_array = [] ;
                //判断由上级往下传的key_array长度是否为0
                if (class_2_key_array.length != 0) {
                    //若key_array长度为0,则说明无需渲染此节点及更深节点,直接往下传空array
                    //若key_array长度不为0,则继续渲染
                    //捕获选中的中类位置
                    class_2_selected_index = oClass_2.get(0).selectedIndex ;
                    $.each(classJson[class_0_key_array[class_0_selected_index]].children[class_1_key_array[class_1_selected_index]].children[class_2_key_array[class_2_selected_index]].children , function(key , value){
                        class_3_key_array.push(key) ;
                        temp_html += "<option value='"+value.trade_name+"'>"+value.trade_name+"</option>";                    
                    });
                }
                //渲染小类
                oClass_3.html(temp_html);
                //渲染完成后清空temp_html
                temp_html = "" ;
                //遍历完成,end

            }
            //改变门类的时候联动大类
            oClass_0.change(function(){
                class_1_init(class_0_key_array);
            });
            //改动大类的时候联动中类
            oClass_1.change(function(){
                class_2_init(class_1_key_array);
            });
            //改变中类的时候联动小类
            oClass_2.change(function(){
                class_3_init(class_2_key_array);
            })
            class_0_init();
        });