简单实用jquery版三级联动select示例


Posted in Javascript onJuly 04, 2013

html和js部分

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=gbk /> 
<title>selectList</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.selectList{width:200px;margin:50px auto;} 
</style> 
<script type="text/javascript" src="jquery1.7.1.js"></script> 
</head> 
<body> 
<div class="selectList"> 
<select class="province"> 
<option>请选择</option> 
</select> 
<select class="city"> 
<option>请选择</option> 
</select> 
<select class="district"> 
<option>请选择</option> 
</select> 
</div> 
<div class="selectList"> 
<select class="province"> 
<option>请选择</option> 
</select> 
<select class="city"> 
<option>请选择</option> 
</select> 
<select class="district"> 
<option>请选择</option> 
</select> 
</div> 
<script type="text/javascript"> 
$(function(){ 
$(".selectList").each(function(){ 
var url = "area.json"; 
var areaJson; 
var temp_html; 
var oProvince = $(this).find(".province"); 
var oCity = $(this).find(".city"); 
var oDistrict = $(this).find(".district"); 
//初始化省 
var province = function(){ 
$.each(areaJson,function(i,province){ 
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>"; 
}); 
oProvince.html(temp_html); 
city(); 
}; 
//赋值市 
var city = function(){ 
temp_html = ""; 
var n = oProvince.get(0).selectedIndex; 
$.each(areaJson[n].c,function(i,city){ 
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>"; 
}); 
oCity.html(temp_html); 
district(); 
}; 
//赋值县 
var district = function(){ 
temp_html = ""; 
var m = oProvince.get(0).selectedIndex; 
var n = oCity.get(0).selectedIndex; 
if(typeof(areaJson[m].c[n].d) == "undefined"){ 
oDistrict.css("display","none"); 
}else{ 
oDistrict.css("display","inline"); 
$.each(areaJson[m].c[n].d,function(i,district){ 
temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>"; 
}); 
oDistrict.html(temp_html); 
}; 
}; 
//选择省改变市 
oProvince.change(function(){ 
city(); 
}); 
//选择市改变县 
oCity.change(function(){ 
district(); 
}); 
//获取json数据 
$.getJSON(url,function(data){ 
areaJson = data; 
province(); 
}); 
}); 
}); 
</script> 
</body> 
</html>

json文件(area.json),这里只是事例,根据情况添加或编写
[ 
{"p":"江西省", 
"c":[ 
{"ct":"南昌市", 
"d":[ 
{"dt":"西湖区"}, 
{"dt":"东湖区"}, 
{"dt":"高新区"} 
]}, 
{"ct":"赣州市", 
"d":[ 
{"dt":"瑞金县"}, 
{"dt":"南丰县"}, 
{"dt":"全南县"} 
]} 
]}, 
{"p":"北京", 
"c":[ 
{"ct":"东城区"}, 
{"ct":"西城区"} 
]}, 
{"p":"河北省", 
"c":[ 
{"ct":"石家庄", 
"d":[ 
{"dt":"长安区"}, 
{"dt":"桥东区"}, 
{"dt":"桥西区"} 
]}, 
{"ct":"唐山市", 
"d":[ 
{"dt":"滦南县"}, 
{"dt":"乐亭县"}, 
{"dt":"迁西县"} 
]} 
]} 
]

各位最好自己封装成插件,方便调用
Javascript 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
js操作select控件的几种方法
Jun 02 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
原生javascript和jquery判断浏览器版本等信息
Jul 04 #Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 #Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 #Javascript
js局部刷新页面时间具体实现
Jul 04 #Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 #Javascript
javascript闭包的高级使用方法实例
Jul 04 #Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 #Javascript
You might like
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
Ext 今日学习总结
2010/09/19 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Django ORM filter() 的运用详解
2020/05/14 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
python利用platform模块获取系统信息
2020/10/09 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
学生会招新策划书
2014/02/14 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python