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 ...
随机推荐
- Inno Steup 打包加入文件夹
在[Files]段下,添加下面代码Source: "执行文件.exe"; DestDir: "{app}"; Flags: igNoreversionSourc ...
- 深入理解滚动scroll
前面的话 前面两篇博文分别介绍过偏移大小.客户区大小.本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出 ...
- .cn根服务器被攻击之后
如果是互联网行业的人员应该知道,8月25日凌晨,大批的“.cn”域名的网站都无法访问,当然包括weibo.cn等大型网站.个人比较奇怪的一件事情是,微博PC网页版是:www.weibo.com,而mo ...
- ZOJ Problem Set - 1331 Perfect Cubes 判断一个double是否为整数
zju对时间要求比较高,这就要求我们不能简单地暴力求解(三个循环搞定),就要换个思路:因为在循环时,已知a,确定b,c,d,在外重两层循环中已经给定了b和c,我们就不用遍历d,我们可以利用d^3=a^ ...
- POST方式提交表单时，后台接受实体如果继承了父类，将无法映射表单对应数据
引言 刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...
- Lucene.net初探
引言 在分析同事开发的客户端搜索项目时注意到,搜索的关键是索引,而提到索引就不得不提Lucene.net,思路就是将需要搜索内容写入索引,客户端自己或局域网其他机器搜索时直接搜索索引,从而查看到你共享 ...
- Replace Temp with Query
double GetPrice() { int basePrice = _quantity * _itemPrice; double discountFactor; ) { discountFacto ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- Ionic2学习笔记（5）：Provider
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html Provider是一种为App提供数据源的方式, 举个 ...
- MindMup 是一个开源的、在线的、简单的思维导图工具
MindMup是一个开源.在线的思维导图工具:它有以下特点: 开源 在线 导图可存放在网站(公有,要是在不同的终端浏览的话需要记住导图的网址)或google driver(私有),无用户名密码 很方便 ...