基于jquery & json的省市区联动代码


Posted in Javascript onJune 26, 2012

效果演示:

基于jquery & json的省市区联动代码

html代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>省市区联动</title> 
<script src="/Scripts/jquery.min.js" type="text/javascript"></script> 
<script src="/Scripts/script.js" type="text/javascript"></script> 
</head> 
<body> 
<h2>Demo:</h2> 
<select id="province"> 
<option value="0">请选择省份</option> 
</select> 
<select id="city"> 
<option value="0">请选择城市</option> 
</select> 
<select id="district"> 
<option value="0">请选择区县</option> 
</select> <!--下列为初始值(可选,编辑表单时设置)--> 
<input type="hidden" value="440000" id="pre_province"/> 
<input type="hidden" value="440500" id="pre_city"/> 
<input type="hidden" value="440511" id="pre_district"/> 
</body> 
</html>

script.js代码:

/* 
author: elycir 
create: 2012-06 
description: 省市区三级(二级)联动 
*/ 
$(function () { 
var citySelector = function () { 
var province = $("#province"); 
var city = $("#city"); 
var district = $("#district"); 
var preProvince = $("#pre_province"); 
var preCity = $("#pre_city"); 
var preDistrict = $("#pre_district"); 
var jsonProvince = "/content/json-array-of-province.js"; 
var jsonCity = "/content/json-array-of-city.js"; 
var jsonDistrict = "/content/json-array-of-district.js"; 
var hasDistrict = true; 
var initProvince = "<option value='0'>请选择省份</option>"; 
var initCity = "<option value='0'>请选择城市</option>"; 
var initDistrict = "<option value='0'>请选择区县</option>"; 
return { 
Init: function () { 
var that = this; 
that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince); 
province.change(function () { 
that._LoadOptions(jsonCity, preCity, city, province, 2, initCity); 
}); 
if (hasDistrict) { 
city.change(function () { 
that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict); 
}); 
province.change(function () { 
city.change(); 
}); 
} 
province.change(); 
}, 
_LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) { 
$.get( 
datapath, 
function (r) { 
var t = ''; // t: html容器 
var s; // s: 选中标识 
var pre; // pre: 初始值 
if (preobj === undefined) { 
pre = 0; 
} else { 
pre = preobj.val(); 
} 
for (var i = 0; i < r.length; i++) { 
s = ''; 
if (comparelen === 0) { 
if (pre !== "" && pre !== 0 && r[i].code === pre) { 
s = ' selected=\"selected\" '; 
pre = ''; 
} 
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>'; 
} 
else { 
var p = parentobj.val(); 
if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) { 
if (pre !== "" && pre !== 0 && r[i].code === pre) { 
s = ' selected=\"selected\" '; 
pre = ''; 
} 
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>'; 
} 
} } 
if (initoption !== '') { 
targetobj.html(initoption + t); 
} else { 
targetobj.html(t); 
} 
}, 
"json" 
); 
} 
}; 
} (); 
citySelector.Init(); 
});

省市区json数据文件:点击下载
Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
网络传输协议(http协议)
Nov 18 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
Jvascript学习实践案例(开发常用)
Jun 25 #Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 #Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 #Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 #Javascript
javascript作用域容易记错的两个地方分析
Jun 22 #Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 #Javascript
You might like
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python使用matplotlib绘制热图
2018/11/07 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python过滤序列元素的方法
2020/07/31 Python
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
公司委托书格式范文
2014/10/09 职场文书