通用三级联动下拉列表

代码例子：

　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的就能看懂！

本文示例源代码或素材下载