通用四级联动下拉列表

时间：2010-09-04 来源：shaoyun

Author: shaoyun
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>

代码附件：fourSelect.rar（包含三级联动的例子）