需求：
对地区进行选择，选择相应的省，就会出现相应范围的市，然后出现相应的范围的县区；如果县不存在，就不现实，自我要求是自己写个简单的插件，方便以后调用；

逻辑：
1.通过div的类名来获取，其下的select标签；
2.通过声明临时变量，用来保存option内容，并通过$.each()来遍历json然后添加到select中；
3.如果某个市没有县，就先判断json中有没记录，如果没有就不现实，有就继续执行下面代码；
4.用change事件来控制三个selet之间的联系；
5.通过ajax $.getJSON，来触发省份事件，然后通过省份select的改变，来触发市区，以此类推；

实现：

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":"迁西县"}

]}

]}

]

html代码

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>select</title>

<meta name="description" content="">

<meta name="keywords" content="">

<script type="text/javascript" src="jquery.js"></script>

<script src = "areaSelect.js"></script>

<link href="" rel="stylesheet">

<style>

	.sel{

		width:300px;

		margin:0 auto;

	}

</style>

</head>

<body>

    <div class="sel">

    	<select class="province">

    		<option>请选择</option>

    	</select>

    	<select class="city">

    		<option>请选择</option>

    	</select>

    	<select class="district">

    		<option>请选择</option>

    	</select>

    </div>

</body>

</html>

<script>

	$(document).ready(function(){

		$(".sel").areaSelect({

			"jsonUrl":"area.json"

		})

	})

</script>

jquery插件

/**

 *

 * @authors Your Name (you@example.org)

 * @date    2015-09-13 01:54:25

 * @version $Id$

 */

(function($){

	$.fn.areaSelect = function(options){

		var settings = $.extend({

			"jsonUrl":"json"

		},options);

        return this.each(function(){

        	var url = options.jsonUrl;

			var addJson;

			var tHtml = "";

			var op = $(this).find(".province");

			var oc = $(this).find(".city");

			var od = $(this).find(".district");

			//初始化

			var province = function(){

	            $.each(addJson,function(i,province){

	            	tHtml += "<option value = '"+province.p+"'>"+province.p+"</option>";

	            });

	            op.html(tHtml);

	            city();

			}

			var city = function(){

				var tHtml="";

				var n = op.get(0).selectedIndex;

				$.each(addJson[n].c,function(i,city){

	                tHtml += "<option value='"+city.ct+"''>"+city.ct+"</option>";

				});

				oc.html(tHtml);

				district();

			}

			var district = function(){

				var tHtml="";

				var n = op.get(0).selectedIndex;

	            var m = oc.get(0).selectedIndex;

	            if(typeof (addJson[n].c[m].d) == "undefined"){

	            	od.css("display","none")

	            }else{

	            	od.css("display","inline");

		            $.each(addJson[n].c[m].d,function(i,district){

		            	tHtml += "<option value='"+district.dt+"'>"+district.dt+"</option>"

		            });

		            od.html(tHtml);

		        }    

		    }

			op.change(function(){

				city();

			})

			oc.change(function(){

				district()

			});

			$.getJSON(settings.jsonUrl,function(data){

				addJson  = data;

				province()

			})

        })

	}

})(jQuery)

转载自：http://www.cnblogs.com/afuge/archive/2013/06/08/3127172.html  有修改！

jquery select三级联动的更多相关文章

  1. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  2. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  3. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  4. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  5. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  6. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  7. jQuery实现三级联动菜单（鼠标悬停联动）

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

  8. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  9. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

随机推荐

  1. bug经验

    1.异常信息丢失导致定位问题困难. 2.findbugs工具 3.在某些if语句判断中return,可能会导致文件句柄无法关闭. 4.lastmodified()在win下和linux下的处理是不同的 ...

  2. Scala学习笔记--特质trait

    http://outofmemory.cn/scala/scala-trait-introduce-and-example 与Java相似之处 Scala类型系统的基础部分是与Java非常相像的.Sc ...

  3. HDU 4116 Fruit Ninja

    http://acm.hdu.edu.cn/showproblem.php?pid=4116 题意:给N个圆,求一条直线最多能经过几个圆?(相切也算) 思路:枚举中心圆,将其他圆的切线按照极角排序,并 ...

  4. 自制单片机之十八……无线通讯模块NRF24L01+

    (一)基础知识篇 今天刚调试好,先看图吧! 这张是AT89C2051控制NRF24L01+做发射调试. 看看NRF24L01细节吧! 这是LCD屏显示: AT89S52做接收测试: 正在接收时的显示: ...

  5. KEIL的混合编程操作

    http://hi.baidu.com/txz01/item/21ad9d75913a7b28d7a89c12 这一篇来讲讲混合编程的问题,在网上找了一下,讲混合编程的文件章也有不少,但进行实例操作讲 ...

  6. C语言在单片机开发中的应用

    在单片机的开发应用中,已逐渐开始引入高级语言,C语言就是其中的一种.对用惯了汇编的人来说,总觉得高级语言’可控性’不好,不如汇编那样随心所欲.但是只要我们掌握了一定的C语言知识,有些东西还是容易做出来 ...

  7. Spring注解 @Resource和@Autowired

    @Resource和@Autowired两者都是做bean的注入使用.其实@Resource并不是Spring的注解,他的包是javax.annotation.Resource 需要导入.但是Spri ...

  8. linux文件合并

    第一:两个文件的交集,并集前提条件:每个文件中不得有重复行1. 取出两个文件的并集(重复的行只保留一份)2. 取出两个文件的交集(只留下同时存在于两个文件中的文件)3. 删除交集,留下其他的行1. c ...

  9. 转:linux shell 数组建立及使用技巧

    linux shell在编程方面比windows 批处理强大太多,无论是在循环.运算.已经数据类型方面都是不能比较的. 下面是个人在使用时候,对它在数组方面一些操作进行的总结. 1.数组定义 [che ...

  10. c#发送邮件样例

    1.通过gmail邮箱发送邮件 try { MailMessage mail = new MailMessage(); SmtpClient SmtpServer = new SmtpClient(& ...