本文使用jquery来实现三级联动下拉列表的示例，下面讲下这个jquery实现的参数配置如下，配置select的三个ID和默认值就行，无默认值填写为null    【实例下载】

1. var defaults = { 
2.       s1:'Select1', 
3.       s2:'Select2', 
4.       s3:'Select3', 
5.       v1:null, 
6.       v2:null, 
7.       v3:null 
8.   }; 

数据格式定义类似如下：

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) 
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>