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

实现效果:

部分数据结构:

主要页面代码:

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