基于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 trim函数 去空格函数与正则集锦
Nov 20 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php 文件上传实例代码
2012/04/19 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php实现留言板功能
2017/03/05 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
JavaScript使用cookie
2007/02/02 Javascript
学习ExtJS border布局
2009/10/08 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python读取csv文件实例解析
2019/12/30 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
给校长的建议书200字
2014/05/16 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
常用的Python代码调试工具总结
2021/06/23 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL