简单实用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中的变量作用域
Dec 06 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
原生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
php获取表单中多个同名input元素的值
2014/03/20 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
xmlHTTP实例
2006/10/24 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
layui实现数据表格自定义数据项
2019/10/26 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
浅谈python之新式类
2018/08/12 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
秋季运动会稿件
2014/01/30 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书