基于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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
浅析node.js中close事件
Nov 26 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
Node.js学习入门
Jan 03 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
JavaScript实现简单日历效果
Sep 11 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python开启debug模式的方法
2019/06/27 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
课程设计心得体会
2013/12/28 职场文书
新学期开学演讲稿
2014/05/24 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android