通用三级联动下拉列表
Author: shaoyun
Email: shaoyun (at) yeah.netDate: 2010-03-10 02:03Blog:用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的就能看懂！
附上代码：
附带以前写的一个Jquery二级级联插件的例子：