基于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代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
vue 实现走马灯效果
Oct 28 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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 fsockopen解决办法 php实现多线程
2014/01/20 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
document.compatMode介绍
2009/05/21 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python实现移位加密和解密
2019/03/22 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
如何通过python实现全排列
2020/02/11 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
J2EE中常用的名词进行解释
2015/11/09 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
表扬稿范文
2015/01/17 职场文书
2015年母亲节寄语
2015/03/23 职场文书
小学班主任心得体会
2016/01/07 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL