基于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 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
记录一次websocket封装的过程
Nov 23 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php中rename函数用法分析
2014/11/15 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JS array 数组详解
2009/03/22 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python随机数函数代码实例解析
2020/02/09 Python
致跳远运动员广播稿
2014/02/11 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
吨的认识教学反思
2014/04/27 职场文书
2015年招聘工作总结
2014/12/12 职场文书
事业单位聘任报告
2015/03/02 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python