基于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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python GUI编程完整示例
2019/04/04 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python 多线程中join()的作用
2020/10/29 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
土建工程师岗位职责
2014/06/10 职场文书
社会实践活动总结
2015/02/05 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
nginx配置指令之server_name的具体使用
2022/08/14 Servers