jquery+json 通用三级联动下拉列表


Posted in Javascript onApril 19, 2010

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

代码打包下载

Javascript 相关文章推荐
jquery 列表双向选择器之改进版
Aug 09 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
详解vue项目打包步骤
Mar 29 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
javascript中的变量是传值还是传址的?
Apr 19 #Javascript
js获取当前select 元素值的代码
Apr 19 #Javascript
监控 url fragment变化的js代码
Apr 19 #Javascript
jquery获取input表单值的代码
Apr 19 #Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 #Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 #Javascript
jquery 新手学习常见问题解决方法
Apr 18 #Javascript
You might like
配置支持SSI
2006/11/25 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python目录与文件名操作例子
2016/08/28 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python实现杨氏矩阵查找
2019/03/02 Python
python区块及区块链的开发详解
2019/07/03 Python
python创建学生管理系统
2019/11/22 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2015元旦标语横幅
2014/12/09 职场文书
银行工作心得体会范文
2016/01/23 职场文书