简单实用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 相关文章推荐
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
javascript白色简洁计算器
May 04 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
原生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
桌面中心(二)数据库写入
2006/10/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
JavaScript 异步调用
2017/10/25 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python学生信息管理系统
2018/03/13 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python实现静态web服务器
2019/09/03 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
情人节活动总结范文
2015/02/05 职场文书
员工家属慰问信
2015/03/24 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Java界面编程实现界面跳转
2022/06/16 Java/Android