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,用作使用的参考 数据格式定义类似如下： 复制代码 代码如下: var threeSelectData={ "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}}, "beijing":{val:"01",items:{ "bj-01":{val:"0101",items:{ "bj-01-01":"010101" }}, "bj-02":{val:"0102",items:{ "bj-02-01":"010201", "bj-02-02":"010202" }} }}, "shanxi":{val:"02",items:{}}, "guangzhou":{val:"02",items:{}} }; 代码例子： 复制代码 代码如下: <script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="areadata.js"></script> <script type="text/javascript"> /* 通用三级联动说明 参数配置如下，配置select的三个ID和默认值就行，无默认值填写为null var defaults = { s1:'Select1', s2:'Select2', s3:'Select3', v1:null, v2:null, v3:null }; */ var defaults = { s1:'Select1', s2:'Select2', s3:'Select3', v1:120000, v2:120200, v3:120224 }; $(function(){ threeSelect(defaults); }); function threeSelect(config){ var $s1=$("#"+config.s1); var $s2=$("#"+config.s2); var $s3=$("#"+config.s3); var v1=config.v1?config.v1:null; var v2=config.v2?config.v2:null; var v3=config.v3?config.v3:null; $.each(threeSelectData,function(k,v){ appendOptionTo($s1,k,v.val,v1); }); $s1.change(function(){ $s2.html(""); $s3.html(""); if(this.selectedIndex==-1) return; var s1_curr_val = this.options[this.selectedIndex].value; $.each(threeSelectData,function(k,v){ if(s1_curr_val==v.val){ if(v.items){ $.each(v.items,function(k,v){ appendOptionTo($s2,k,v.val,v2); }); } } }); if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);} $s2.change(); }).change(); $s2.change(function(){ $s3.html(""); var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value; if(this.selectedIndex==-1) return; var s2_curr_val = this.options[this.selectedIndex].value; $.each(threeSelectData,function(k,v){ if(s1_curr_val==v.val){ if(v.items){ $.each(v.items,function(k,v){ if(s2_curr_val==v.val){ $.each(v.items,function(k,v){ appendOptionTo($s3,k,v,v3); }); } }); if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);} } } }); }).change(); function appendOptionTo($o,k,v,d){ var $opt=$("<option>").text(k).val(v); if(v==d){$opt.attr("selected", "selected")} $opt.appendTo($o); } } </script> <style type="text/css" media="screen"> select{width:80px;} </style> <select id="Select1" name="Select1"></select> <select id="Select2" name="Select2"></select> <select id="Select3" name="Select3"></select> 文字没有详细整理！懂点JS的就能看懂！ 代码打包下载

　　推荐阅读

　　网页图片延时加载的js代码

实现原理 把所有需要延时加载的图片改成如下的格式： <img lazy_src="图片路径" border="0"/> 然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载>>>详细阅读

本文标题：jquery+json 通用三级联动下拉列表

地址：http://www.17bianji.com/kaifa2/JS/26555.html

 1/2    1