推荐订阅源

通用三级联动下拉列表

Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-03-10 02:03
Blog: http://shaoyun.cnblogs.com/

用Jquery实现，原始代码只支持IE，这里我改了一下，我的代码里面有三个版本的实现
第一个是通过读取XML构建，支持IE/firefox，chrome不支持，有兴趣的可以将读取XML的部分改成AJAX的方式，这样chrome支持就不成问题
第二个是采用Json数据格式构建，是我的第二次尝试改进
第三个与第二个其实是一样的，只不过将数据分离到JS文件中，我的代码中有一个ASP文件，是调用数据库生成Json省市区数据的，如果页面直接调用ASP文件，速度会很慢，生成JS文件后直接调用就要快的多，而且这部分数据一般不会改动

更新记录：

++2010-04-19 12:11:24
  多加了一个插件的例子，其实不算插件，就是一函数，为什么不写成插件，只是基于灵活性的考虑，
  让select可以放在页面的任何位置，而不是局限在div、table、td等页面元素内
  参数类似下面，s1/s2/s3配置select的id，v1/v2/v3为默认值，如果不想设置请设置为null，或者直接不设置

  参数配置如下，配置select的三个ID和默认值就行，无默认值填写为null
  var defaults = {
      s1:'Select1',
      s2:'Select2',
      s3:'Select3',
      v1:null,
      v2:null,
      v3:null
  };
  这算是第四个例子，目录下的php文件是服务端数据的生成Demo,用作使用的参考

数据格式定义类似如下：

 1 var threeSelectData={
 2 "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}},
 3     "beijing":{val:"01",items:{
 4         "bj-01":{val:"0101",items:{
 5             "bj-01-01":"010101"
 6         }},
 7         "bj-02":{val:"0102",items:{
 8             "bj-02-01":"010201",
 9             "bj-02-02":"010202"
10         }}
11     }},
12     "shanxi":{val:"02",items:{}},
13     "guangzhou":{val:"02",items:{}}
14 };

 代码例子：

 1 <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
 2 <script type="text/javascript" src="areadata.js"></script>
 3 <script type="text/javascript">
 4 /*
 5 通用三级联动说明
 6 参数配置如下，配置select的三个ID和默认值就行，无默认值填写为null
 7 var defaults = {
 8     s1:'Select1',
 9     s2:'Select2',
10     s3:'Select3',
11     v1:null,
12     v2:null,
13     v3:null
14 };
15 */
16 var defaults = {
17     s1:'Select1',
18     s2:'Select2',
19     s3:'Select3',
20     v1:120000,
21     v2:120200,
22     v3:120224
23 };
24 $(function(){
25     threeSelect(defaults);
26 });
27 function threeSelect(config){
28     var $s1=$("#"+config.s1);
29     var $s2=$("#"+config.s2);
30     var $s3=$("#"+config.s3);
31     var v1=config.v1?config.v1:null;
32     var v2=config.v2?config.v2:null;
33     var v3=config.v3?config.v3:null;
34     $.each(threeSelectData,function(k,v){
35         appendOptionTo($s1,k,v.val,v1);
36     });
37     $s1.change(function(){
38         $s2.html("");
39         $s3.html("");
40         if(this.selectedIndex==-1) return;
41         var s1_curr_val = this.options[this.selectedIndex].value;
42         $.each(threeSelectData,function(k,v){
43             if(s1_curr_val==v.val){
44                 if(v.items){
45                     $.each(v.items,function(k,v){
46                         appendOptionTo($s2,k,v.val,v2);
47                     });
48                 }
49             }
50         });
51         if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
52         $s2.change();
53     }).change();
54     $s2.change(function(){
55         $s3.html("");
56         var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
57         if(this.selectedIndex==-1) return;
58         var s2_curr_val = this.options[this.selectedIndex].value;
59         $.each(threeSelectData,function(k,v){
60             if(s1_curr_val==v.val){
61                 if(v.items){
62                     $.each(v.items,function(k,v){
63                         if(s2_curr_val==v.val){
64                             $.each(v.items,function(k,v){
65                                 appendOptionTo($s3,k,v,v3);
66                             });
67                         }
68                     });
69                     if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
70                 }
71             }
72         });
73     }).change();
74     function appendOptionTo($o,k,v,d){
75         var $opt=$("<option>").text(k).val(v);
76         if(v==d){$opt.attr("selected", "selected")}
77         $opt.appendTo($o);
78     }
79 }
80 </script>
81 <style type="text/css" media="screen">
82     select{width:80px;}
83 </style>
84 <select id="Select1" name="Select1"></select>
85 <select id="Select2" name="Select2"></select>
86 <select id="Select3" name="Select3"></select>

文字没有详细整理！懂点JS的就能看懂！

附上代码：threeSelect.rar

附带以前写的一个Jquery二级级联插件的例子：

JQuery二级级联插件