通用四级联动下拉列表

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（包含三级联动的例子）

转载于:https://www.cnblogs.com/shaoyun/archive/2010/09/04/1817655.html