jQuery - 全国省市县三级联动
最近有空用jquery做了一个全国省市县的三级联动，在以后或许可以用的到 ，遗憾的是我还没用封装，等有空看能不能封装成一个插件
废话不多说，贴上代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<script src="city.js"></script>
<script src="jquery-1.11.3.js"></script>
<style>
div{
width:500px;
margin:0 auto;
text-align:center;
}
select{
width:100px;
}
</style>
</head>
<body>
<div>
<h1>全国省市县三级联动</h1>
<select id="province">
<option value="省份（市）">省份（市）</option>
</select>
<select id="city">
<option value="市（区）">市（区）</option>
</select>
<select id="county">
<option value="县、镇">县、镇</option>
</select>
</div>
<script>
var cityAll=city.citylist;
$.each(cityAll,function(i,n){
$("#province").append('<option value="'+ n.p + '">' + n.p + '</option>');
});
$("#province,#city").change(function(){
if($(this).attr("id") == "province"){
$("#city").html("").append('<option value="市（区）">市（区）</option>').next().html("").append('<option value="县、镇">县、镇</option>');
}else{
$("#county").html("").append('<option value="县、镇">县、镇</option>');
}
$.each(cityAll,function(j,k){
if($("#province").val() == k.p){
$.each(k.c,function(l,m){
$("#city").append('<option value="'+ m.n + '">' + m.n + '</option>');
if(m.a){
$("#county").show();
if($("#city").val() == m.n){
$.each(m.a,function(e,f){
$("#county").append('<option value="'+ f.s + '">' + f.s + '</option>');
});
}
}else{
$("#county").hide(); }
});
}
});
}); </script>
</body>
</html>
做出来的效果就是：
全国省市县三级联动
省份（市）
市（区）
县、镇
jQuery - 全国省市县三级联动的更多相关文章
- Android 省市县 三级联动（android-wheel的使用）
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...
- 省市县三级联动js代码
省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...
- wex5 实战 省市县三级联动与地址薄同步
无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2: 地址薄选项,利用inputSel ...
- 省市县三级联动 sql语句
发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...
- Android 省市县 三级联动（android-wheel的使用）[转]
转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...
- php仿经典省市县三级联动
之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...
- JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
- Day 16 之二 省市县三级联动
摘录自:雨神,供参考! province_dic = { "河北": { "石家庄": ["鹿泉", "藁城", &qu ...
随机推荐
- MyBatis参数绑定规则及原理分析
MyBatis参数的传递有几种不同的方法,本文通过测试用例出发,对其中的方式进行总结和说明,并对其部分源码进行分析. 一.测试用例(环境参考之前博客SSM接口编程一文 http://www.cnblo ...
- 深入理解javascript对象系列第三篇——神秘的属性描述符
× 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值 ...
- 【开源】OSharp3.0框架解说系列：新版本说明及新功能规划预览
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- JQuery利用sort对DOM元素进行排序
前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...
- 应用程序框架实战二十二 : DDD分层架构之仓储（层超类型基础篇）
前一篇介绍了仓储的基本概念,并谈了我对仓储的一些认识,本文将实现仓储的基本功能. 仓储代表聚合在内存中的集合,所以仓储的接口需要模拟得像一个集合.仓储中有很多操作都是可以通用的,可以把这部分操作抽取到 ...
- Ubuntu杂记——双系统重装Win7后找不到Ubuntu的解决办法
之前装过Ubuntu和Win7的双系统,后来重装了Win7,发现Ubuntu不见了,那会没怎么用,也没去解决问题.现在再看Android内核剖析,大部分都是在Ubuntu环境下进行的,所以百度了一些方 ...
- 修改USB固件库的Customer_HID例程
我用的是神州三号开发板子,板子的USB模块原理图为: 配置端口G的11号引脚为usb的使能引脚,按理来说应该是开漏输出的(看了很多的修改代码都是这个模式),不过就是不能使能usb,只能配置成推挽的才行 ...
- 从一道面试题分析javascript闭包
据说是一不注意就会做错的五道javascript面试题之一,我们来看看这道题长什么样 function Container( properties ) { var objthis = this; fo ...
- MySQL常见错误
1. TokuFT file system space is really low and access is restricted 解决方法:修改tokudb_fs_reserve_percent参 ...
- CSS3中border-radius、box-shadow与gradient那点事儿
一.border-radius border-radius用于添加圆角边框,用处非常广泛. 1)一个值,代表了四个角 .radius-one { /* Safari 3-4, iOS 1-3.2, A ...