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 相关文章推荐
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
详解javascript中的事件处理
Nov 06 Javascript
js+css实现select的美化效果
Mar 24 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
如何制作自己的原生JavaScript路由
May 05 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
实例讲解通过​PHP创建数据库
2019/01/20 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
体育运动口号
2014/06/09 职场文书
简单租房协议书
2014/10/21 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
顶岗实习协议书
2015/01/29 职场文书
学校捐书活动总结
2015/05/08 职场文书
陪护人员误工证明
2015/06/24 职场文书
联村联户简报
2015/07/21 职场文书
自书遗嘱范文
2015/08/07 职场文书
九不准学习心得体会
2016/01/23 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
你真的会用Mysql的explain吗
2022/03/31 MySQL