通用四级联动下拉列表
Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-09-03
Email: shaoyun (at) yeah.net
Date: 2010-09-03
Blog: http://shaoyun.cnblogs.com/
前面的文章 通用三级联动下拉列表 我写了一个三级联动的函数，留言里有网友说需要四级，于是便写了一个。
1 <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
2 <script type="text/javascript">
3 var fourSelectData={
4 "省份":{val:"",items:{
5 "城市":{val:"",items:{
6 "区县":{val:"",items:{
7 "乡镇":""
8 }}
9 }}
10 }},
11 "北京":{val:"01",items:{
12 "bj-01":{val:"0101",items:{
13 "bj-01-01县":{val:"010101",items:{}}
14 }},
15 "bj-02":{val:"0102",items:{
16 "bj-02-01县":{val:"010201",items:{}},
17 "bj-02-02县":{val:"010202",items:{}}
18 }}
19 }},
20 "陕西":{val:"02",items:{
21 "sx01市":{val:"0201",items:{
22 "sx-01-01县":{val:"020101",items:{}}
23 }},
24 "sx02市":{val:"0202",items:{
25 "sx-02-01县":{val:"020201",items:{
26 "sx-02-01-01镇":"02020101",
27 "sx-02-01-02镇":"02020102"
28 }},
29 "sx-02-02县":{val:"020202",items:{
30 "sx-02-02-01镇":"02020201",
31 "sx-02-02-02镇":"02020202"
32 }}
33 }}
34 }},
35 "广州":{val:"03",items:{}}
36 };
37 /*
38 通用四级联动说明
39 参数配置如下，配置select的四个ID和默认值就行，无默认值填写为null，v1-v4可省略
40 var defaults = {
41 s1:'Select1',
42 s2:'Select2',
43 s3:'Select3',
44 s4:'Select3',
45 v1:null,
46 v2:null,
47 v3:null,
48 v4:null
49 };
50 */
51 var defaults = {
52 s1:'Select1',
53 s2:'Select2',
54 s3:'Select3',
55 s4:'Select4',
56 v1:"02",
57 v2:"0202",
58 v3:"020202",
59 v4:"02020202"
60 };
61 $(function(){
62 fourSelect(defaults);
63 });
64 function fourSelect(config){
65 var $s1=$("#"+config.s1);
66 var $s2=$("#"+config.s2);
67 var $s3=$("#"+config.s3);
68 var $s4=$("#"+config.s4);
69 var v1=config.v1?config.v1:null;
70 var v2=config.v2?config.v2:null;
71 var v3=config.v3?config.v3:null;
72 var v4=config.v4?config.v4:null;
73 $.each(fourSelectData,function(k,v){
74 appendOptionTo($s1,k,v.val,v1);
75 });
76 $s1.change(function(){
77 $s2.html("");
78 if(this.selectedIndex==-1) return;
79 var s1_curr_val = this.options[this.selectedIndex].value;
80 $.each(fourSelectData,function(k,v){
81 if(s1_curr_val==v.val){
82 if(v.items){
83 $.each(v.items,function(k,v){
84 appendOptionTo($s2,k,v.val,v2);
85 });
86 }
87 }
88 });
89 if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
90 $s2.change();
91 }).change();
92 $s2.change(function(){
93 $s3.html("");
94 if(this.selectedIndex==-1) return;
95 var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
96 var s2_curr_val = this.options[this.selectedIndex].value;
97 $.each(fourSelectData,function(k,v){
98 if(s1_curr_val==v.val){
99 if(v.items){
100 $.each(v.items,function(k,v){
101 if(s2_curr_val==v.val){
102 if(v.items){
103 $.each(v.items,function(k,v){
104 appendOptionTo($s3,k,v.val,v3);
105 });
106 }
107 }
108 });
109 }
110 }
111 });
112 if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
113 $s3.change();
114 }).change();
115 $s3.change(function(){
116 $s4.html("");
117 if(this.selectedIndex==-1) return;
118 var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
119 var s2_curr_val = $s2[0].options[$s2[0].selectedIndex].value;
120 var s3_curr_val = this.options[this.selectedIndex].value;
121 $.each(fourSelectData,function(k,v){
122 if(s1_curr_val==v.val){
123 if(v.items){
124 $.each(v.items,function(k,v){
125 if(s2_curr_val==v.val){
126 if(v.items){
127 $.each(v.items,function(k,v){
128 if(s3_curr_val==v.val){
129 if(v.items){
130 $.each(v.items,function(k,v){
131 appendOptionTo($s4,k,v,v4);
132 });
133 }
134 }
135 });
136 }
137 }
138 });
139 }
140 }
141 });
142 if($s4[0].options.length==0){appendOptionTo($s4,"...","",v4);}
143 }).change();
144 function appendOptionTo($o,k,v,d){
145 var $opt=$("<option>").text(k).val(v);
146 if(v==d){$opt.attr("selected", "selected")}
147 $opt.appendTo($o);
148 }
149 }
150 </script>
151 <style type="text/css" media="screen">
152 select{width:100px;}
153 </style>
154 <select id="Select1" name="Select1"></select>
155 <select id="Select2" name="Select2"></select>
156 <select id="Select3" name="Select3"></select>
157 <select id="Select4" name="Select4"></select>
2 <script type="text/javascript">
3 var fourSelectData={
4 "省份":{val:"",items:{
5 "城市":{val:"",items:{
6 "区县":{val:"",items:{
7 "乡镇":""
8 }}
9 }}
10 }},
11 "北京":{val:"01",items:{
12 "bj-01":{val:"0101",items:{
13 "bj-01-01县":{val:"010101",items:{}}
14 }},
15 "bj-02":{val:"0102",items:{
16 "bj-02-01县":{val:"010201",items:{}},
17 "bj-02-02县":{val:"010202",items:{}}
18 }}
19 }},
20 "陕西":{val:"02",items:{
21 "sx01市":{val:"0201",items:{
22 "sx-01-01县":{val:"020101",items:{}}
23 }},
24 "sx02市":{val:"0202",items:{
25 "sx-02-01县":{val:"020201",items:{
26 "sx-02-01-01镇":"02020101",
27 "sx-02-01-02镇":"02020102"
28 }},
29 "sx-02-02县":{val:"020202",items:{
30 "sx-02-02-01镇":"02020201",
31 "sx-02-02-02镇":"02020202"
32 }}
33 }}
34 }},
35 "广州":{val:"03",items:{}}
36 };
37 /*
38 通用四级联动说明
39 参数配置如下，配置select的四个ID和默认值就行，无默认值填写为null，v1-v4可省略
40 var defaults = {
41 s1:'Select1',
42 s2:'Select2',
43 s3:'Select3',
44 s4:'Select3',
45 v1:null,
46 v2:null,
47 v3:null,
48 v4:null
49 };
50 */
51 var defaults = {
52 s1:'Select1',
53 s2:'Select2',
54 s3:'Select3',
55 s4:'Select4',
56 v1:"02",
57 v2:"0202",
58 v3:"020202",
59 v4:"02020202"
60 };
61 $(function(){
62 fourSelect(defaults);
63 });
64 function fourSelect(config){
65 var $s1=$("#"+config.s1);
66 var $s2=$("#"+config.s2);
67 var $s3=$("#"+config.s3);
68 var $s4=$("#"+config.s4);
69 var v1=config.v1?config.v1:null;
70 var v2=config.v2?config.v2:null;
71 var v3=config.v3?config.v3:null;
72 var v4=config.v4?config.v4:null;
73 $.each(fourSelectData,function(k,v){
74 appendOptionTo($s1,k,v.val,v1);
75 });
76 $s1.change(function(){
77 $s2.html("");
78 if(this.selectedIndex==-1) return;
79 var s1_curr_val = this.options[this.selectedIndex].value;
80 $.each(fourSelectData,function(k,v){
81 if(s1_curr_val==v.val){
82 if(v.items){
83 $.each(v.items,function(k,v){
84 appendOptionTo($s2,k,v.val,v2);
85 });
86 }
87 }
88 });
89 if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
90 $s2.change();
91 }).change();
92 $s2.change(function(){
93 $s3.html("");
94 if(this.selectedIndex==-1) return;
95 var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
96 var s2_curr_val = this.options[this.selectedIndex].value;
97 $.each(fourSelectData,function(k,v){
98 if(s1_curr_val==v.val){
99 if(v.items){
100 $.each(v.items,function(k,v){
101 if(s2_curr_val==v.val){
102 if(v.items){
103 $.each(v.items,function(k,v){
104 appendOptionTo($s3,k,v.val,v3);
105 });
106 }
107 }
108 });
109 }
110 }
111 });
112 if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
113 $s3.change();
114 }).change();
115 $s3.change(function(){
116 $s4.html("");
117 if(this.selectedIndex==-1) return;
118 var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
119 var s2_curr_val = $s2[0].options[$s2[0].selectedIndex].value;
120 var s3_curr_val = this.options[this.selectedIndex].value;
121 $.each(fourSelectData,function(k,v){
122 if(s1_curr_val==v.val){
123 if(v.items){
124 $.each(v.items,function(k,v){
125 if(s2_curr_val==v.val){
126 if(v.items){
127 $.each(v.items,function(k,v){
128 if(s3_curr_val==v.val){
129 if(v.items){
130 $.each(v.items,function(k,v){
131 appendOptionTo($s4,k,v,v4);
132 });
133 }
134 }
135 });
136 }
137 }
138 });
139 }
140 }
141 });
142 if($s4[0].options.length==0){appendOptionTo($s4,"...","",v4);}
143 }).change();
144 function appendOptionTo($o,k,v,d){
145 var $opt=$("<option>").text(k).val(v);
146 if(v==d){$opt.attr("selected", "selected")}
147 $opt.appendTo($o);
148 }
149 }
150 </script>
151 <style type="text/css" media="screen">
152 select{width:100px;}
153 </style>
154 <select id="Select1" name="Select1"></select>
155 <select id="Select2" name="Select2"></select>
156 <select id="Select3" name="Select3"></select>
157 <select id="Select4" name="Select4"></select>
代码附件：fourSelect.rar（包含三级联动的例子）
