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>