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 ...
随机推荐
- jsp登入oracle
<body> <% Class.forName("oracle.jdbc.driver.OracleDriver"); Connection conn=null; ...
- MongoDB replica set IDs do not match
在搭建MongoDB(版本 3.2.9)的Replica Set时,使用 rs.status() 查看Replica Set的状态,发现一个成员异常:replica set IDs do not ma ...
- margin-top失效的解决方法
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...
- SQL 笔记 By 华仔
-------------------------------------读书笔记------------------------------- 笔记1-徐 最常用的几种备份方法 笔记2-徐 收缩数据 ...
- Sql Server系列：数据类型转换函数
T-SQL提供了两个显示转换的函数:CAST函数和CONVERT函数. 1. CAST函数 语法: CAST ( expression AS data_type [ ( length ) ] ) 示例 ...
- SQL 数据库管理---公司培训
一.实例 一个SQL的服务引擎就是一个SQL实例,每装一次SQL就会产生一次实例. 实例分为命名实例和默认实例,一台Windows服务器可以有多个SQL实例,但是只能有一个默认实例. 不同的实例之间相 ...
- 实现python中的map函数
假设Python没有提供map()函数,自行编写my_map()函数实现与map()相同的功能.以下代码在Python 2.7.8中实现. 实现代码: def my_map(fun,num): i = ...
- eclipse build workspace太慢或者 js出错问题解决
1.js文件错误解决办法 右键项目->properties->Builders(注:JavaScript Validator也会引起 build workspace太慢) 2.Eclips ...
- DOM操作
DOM操作,JS来操作页面 wiindows对象操作 document对象操作 点击事件:将DIV要执行的事件代码装封 onclick 鼠标单击 ondblelick 鼠标双击 onk ...
- ZOJ Problem Set - 1337 Pi 最大公约数
这道题目的关键在于怎么求两个整数的最大公约数,这里正好复习一下以前的知识,如下: 1.设整数a和b 2.如果a和b都为0,则二者的最大公约数不存在 3.如果a或b等于0,则二者的最大公约数为非0的一个 ...