前端實現行業分類四級聯動選擇表單

實現效果:

---

 

---

 

 

部分數據結構:

---

 

主要頁面代碼:

 1     <form id="form">
 2         <div id="select-class" name="typeClass">
 3             <select name="main_business_type_0"  id="class-0">
 4                 <option>請選擇門類</option>
 5             </select>
 6             /
 7             <select name="main_business_type_1" id="class-1">
 8                 <option>請選擇大類</option>
 9             </select>
10             /
11             <select name="main_business_type_2" id="class-2">
12                 <option>請選擇中類</option>
13             </select>
14             /
15             <select name="main_business_type_3" id="class-3">
16                 <option>請選擇小類</option>
17             </select>
18         </div>
19     </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();
        });