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

逻辑:
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. POJ2151 动态规划

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...

  2. mac下 配置tomcat

    第一步: 1.打开你的终端:然后输入  pico .bash_profile   回车 第二步: 2. 然后添加你tomcat放入的路径的path 编辑完后,control+x   (保存)    继 ...

  3. spi ssp

    SSP(Synchronous Serial Port 同步串行口)某些微处理器所含有的一个通信模块(或支持的通信模式),用来和外围串行部件或其他微处理器进行通信,这些外围部件可以是串行E2PROM. ...

  4. org/hamcrest/SelfDescribing

    今天在Idea下使用JUtil的时候,运行@Test,报错:org/hamcrest/SelfDescribing 解决办法: (1)换成junit-4.8.jar (2)junit-4.11.jar ...

  5. iOS 容易引“起循环引用”的三种场景

    笔者在阅读中总结了一下,在iOS平台容易引起循环引用的四个场景: 一.parent-child相互持有.委托模式 [案例]:   @interface FTAppCenterMainViewContr ...

  6. iOS界面调试工具 Reveal-备用

    Reveal是一个iOS程序界面调试工具.使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面. 对于动态或复杂的交互界面,手写UI是不可避免的.通过Reveal,我们可以方便地调试 ...

  7. Detecting an Ajax request in PHP

    1:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. Android Activity 生命周期的透彻理解

    说来惭愧,虽然已经做了一年多的android开发,但是最近被人问起activity的生命周期的时候,却感觉自己并不能很自信很确定的回答对方的问题,对activity的生命周期的理解还不透彻啊.     ...

  9. TranslateAnimation详解

    TranslateAnimation详解 Android JDK为我们提供了4种动画效果,分别是: AlphaAnimation,RotateAnimation, ScaleAnimation, Tr ...

  10. java中如果需要精确的计算答案,请避免使用double类型与float类型

    double类型与float类型主要用于科学计算与工程计算而设计的,用于二进制浮点计算.对于普通计算通常是结果不准确的,所以对于普通的浮点数的加减法等,解决的方法需要用int,long,BigDeci ...