基于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实现shift/ctrl/alt按键的获取
Apr 08 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
绑定回车enter事件代码
May 18 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
一次编写,随处运行
2006/10/09 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
初识Node.js
2014/09/03 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python进程间通信用法实例
2015/06/04 Python
python操作redis方法总结
2018/06/06 Python
python opencv实现运动检测
2018/07/10 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python 的AES加密与解密实现
2019/07/09 Python
Python新手学习标准库模块命名
2020/05/29 Python
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
幼儿园教师个人反思
2014/01/30 职场文书
销售活动策划方案
2014/08/26 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
施工安全保证书
2015/05/09 职场文书
用Python生成会跳舞的美女
2022/01/18 Python