實現效果:
部分數據結構:
主要頁面代碼:
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();
});
