通用三级联动下拉列表

通用三级联动下拉列表

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二级级联插件

 

转载于:https://www.cnblogs.com/shaoyun/archive/2010/04/19/1715311.html