基于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 multiSelect 多选下拉框
Jul 09 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
javascript实现标签切换代码示例
2016/05/22 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
详解vue 命名视图
2019/08/14 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
一篇文章快速了解Python的GIL
2018/01/12 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
解决Django中多条件查询的问题
2019/07/18 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
专升本自我鉴定
2013/10/10 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
大学四年个人总结
2015/03/03 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python