JS省市区联动
JS省市区使用文档
一：服务器返回JSON格式要求如下网址里面data的格式：(拿KISSY组件data格式来做的)
http://gallery.kissyui.com/cityselector/doc/linkage-data.js
二：使用时，页面head部分需要引入jquery和省市区JS，依赖于HTML结构如下：
<select id="prov4" data-code="220000"></select>
<select id="city4" data-code="220300"></select>
<select id="area4" data-code="220322"></select>
属性说明：
id：下拉框dom节点(页面上是唯一的)，用于js初始化的钩子。
data-code: 初始化页面时可以根据省市区的编码来指定那个省份，市及区来显示。比如我想指定 "吉林省 长春市 朝阳区" 页面默认显示的话，我们可以在HTML结构上加相对应的data-code编码来指定，比如如下：
<select class="prov" id="prov4" data-code ="220000"></select>
<select class="city" id="city4" data-code ="220100"></select>
<select class="dist" id="area4" data-code ="220104"></select>
页面一打开的时候如下显示：
三：省市区JS初始化的方法如下：
var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});
属性说明如下：
data: data配置项是指 后台返回的json数据的保存的全局变量。
provId 指省份下拉框select的id。
cityId 指城市下拉框select的id。
areaId 指区下拉框select的id。
省市区id传参方式：都是以 #XXX的.
省市区基本的配置项如下：
data: 指后台返回的JSON数据。
provId： 省份下拉框select的id。
cityId： 指城市下拉框select的id。
areaId: 指区下拉框select的id。
isSelect: 默认为true 选择第一项 如果页面有指定省市区项时，就显示指定项。如果false，就选中 "请选择"
provCallBack: 省份下拉框渲染完成后的回调函数。
cityCallBack： 市下拉框渲染完成后的回调函数。
areaCallBack： 区下拉框渲染完成后的回调函数。
demo演示：
一：默认的HTML结构如下：
<select class="prov" id="prov4"></select>
<select class="city" id="city4"></select>
<select class="dist" id="area4"></select>
JS代码初始化的方式如下：
var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});
打开页面后，页面显示如下：
1. 可以看到，页面一打开的时候 默认显示第一项 北京，我们也可以根据 省 市 区 切换其他省份去，可以看到上面的gif图时，下面的select中的属性data-code也跟着变化，如果省份切换到请选择下拉框时候，那么省 市 区中的data-code变为-1，且市，区不可选择，只能是 请选择下拉框。
2. 当有省份时候，我切换市 到 "请选择"项时候 那么区也变为请选择 相应的 市和区 select中的data-code 值变为-1。其中data-code 就是form表单提交时候 需要的。也就是说 某某省份下的所有市和所有区。
3. 当同时有省，市的时候，我区也可以change，那么当选择其他的区的时候 data-code也同时变化，当切换到请选择的时候 那么value为-1，也就是说是 某某省 某某市下面的所有区。
二： 第二种就是假如页面一初始化的时候我想指定某某省 某某市 某某区的时候，要如何编写HTML结构呢，比如像下面的图上一样。
我们可以在select框加上data-code属性来指定，如下：
注意：如果我指定了省份是：浙江省，市：不是浙江省里面的市，那么选中的市是浙江省的默认的第一个市，同理 区也一样。
三： 第三种初始化是：通过配置项 isSelect 来配置的，默认此配置项为true，如果没有指定省市区的话，那么默认选种第一项，如果有指定省市区的话，那么显示指定的省市区。如果 isSelect 配置项为false的话，那么默认显示是 请选择下拉框。可以看下代码如下判断！
我们也可以看看gif图显示的。
如上gif图所示：默认显示都是 "请选择"下拉框，data-code都为-1，当选择 某某省时候 data-code值变化，但是相对应的 "市" 和 "区" 还是请选择下拉框，同理当选中某项市的时候，select中的属性data-code也相应的变化，但是区下拉框还是"请选择"下拉框。当选择区某项的时候 data-code也相应的变化。
JS初始化方式如下，只需要增加一个配置项 isSelect:false即可，如下：
var selectVa2 = new CitySelect({
data : data,
provId : "#prov5",
cityId : '#city5',
areaId : '#area5',
isSelect: false
});
下面是所有的HTML代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script src="js/city2.js"></script>
<script type="text/javascript" src="js/citySelect2.js"></script>
<title>Document</title>
</head>
<body> <div id="city_4">
<select class="prov" id="prov4" data-code ="220000"></select>
<select class="city" id="city4" data-code ="220100"></select>
<select class="dist" id="area4" data-code ="220104"></select>
</div> <div id="city_5">
<select class="prov" id="prov5"> </select>
<select class="city" id="city5"></select>
<select class="dist" id="area5"></select>
</div>
<script> var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
}); var selectVa2 = new CitySelect({
data : data,
provId : "#prov5",
cityId : '#city5',
areaId : '#area5',
isSelect: false
}); </script>
</body>
</html>
javascript代码如下：
/**
* Jquery省市区联动代码重构
* @version 0.0.2
*/ function CitySelect(options) {
this.config = {
data : '', // 数据
provId : '', // 省下拉框id容器 格式是 #XXX
cityId : '', // 市下拉框id容器 格式是 #XXX
areaId : '', // 区下拉框id容器 格式是 #XXX
isSelect : true, // 默认为true 选择第一项 如果页面有指定省市区项时，就显示指定项。
// 如果false，就选中 "请选择"
provCallBack : null, // 省份渲染完成后回调
cityCallBack : null, // 市渲染完成后的回调
areaCallBack : null // 区渲染完成后的回调
};
this.config = $.extend(this.config, options || {});
this.init();
} CitySelect.prototype = { constructor: CitySelect, /*
* 初始化方法init
*/
init: function() {
var self = this,
_config = self.config; if(!/^#/.test(_config.provId)) {
alert("省份ID传的不正确,格式是 #XXX");
return;
}
if(!/^#/.test(_config.cityId)) {
alert("城市ID传的不正确,格式是 #XXX");
return;
}
if(!/^#/.test(_config.cityId)) {
alert("区ID传的不正确,格式是 #XXX");
return;
}
this.provCode = $(_config.provId).attr("data-code");
this.cityCode = $(_config.cityId).attr("data-code");
this.areaCode = $(_config.areaId).attr("data-code"); // 使省市区id (#XX --> XX)
this.provid = _config.provId.replace(/^#/g,'');
this.cityid = _config.cityId.replace(/^#/g,'');
this.areaid = _config.areaId.replace(/^#/g,''); // 渲染省份
self._provFunc(); //渲染省对应的市
self._cityFunc(); // 渲染省市 对应的区
self._areaFunc(); // 如果省份的值是-1的话 那么设置省市区select都为-1
var provFirstOpt = $(_config.provId).val();
if(provFirstOpt == -1) {
$(_config.provId).attr("data-code","-1");
$(_config.cityId).attr("data-code","-1");
$(_config.areaId).attr("data-code","-1");
}
// change事件 省切换 自动切换市 and 区
$(_config.provId).change(function(e){
self._cityFunc();
self._areaFunc();
}); // 市 change事件 自动切换区
$(_config.cityId).change(function(e){
self._areaFunc();
});
// 区change事件
$(_config.areaId).change(function(){
$(_config.areaId).attr("data-code",$(this).val());
});
},
/*
* 渲染省数据
* @method _provFunc {private}
*/
_provFunc: function(){
var self = this,
_config = self.config; var elemHtml = '';
elemHtml+= '<option value="-1" data-name="请选择" selected>请选择</option>'; $(_config.data).each(function(i,curItem){
elemHtml += "<option data-name='"+curItem[1]+"' value='"+curItem[0]+"'>"+curItem[1]+"</option>";
});
$(_config.provId).html(elemHtml); if(_config.isSelect) {
$($(_config.provId + " option")[1]).attr("selected",'true');
if(this.provCode) {
self._setSelectCode(_config.provId,this.provCode);
}
} _config.provCallBack && $.isFunction(_config.provCallBack) && _config.provCallBack();
},
/*
* 渲染省对应的市数据
* @method _cityFunc {private}
*/
_cityFunc: function(){
var self = this,
_config = self.config; var provIndex = $(_config.provId).get(0).selectedIndex, // 获取省份的索引index
elemHtml = '',
prov,
citys,
provOpt; provOpt = $($(_config.provId + ' option')[0]).attr("value");
var opthtml = '<option value="-1" data-name="请选择" selected>请选择</option>'; // 如果省有请选择的话 那么相应的省要减一
if(provOpt == -1) {
provIndex--;
}
$(_config.cityId).empty();
$(_config.areaId).empty();
/*
* 如果选择的是 第一项 "请选择" 的话 那么省市区的value都为-1
* 并且默认选中市 区的第一项 请选择option
*/
if(provIndex < 0){
$(_config.provId).attr("data-code",'-1');
$(_config.cityId).attr("data-code",'-1');
$(_config.areaId).attr("data-code",'-1'); $(_config.cityId).html(opthtml);
$(_config.areaId).html(opthtml);
return;
}
prov = _config.data[provIndex];
citys = prov[2];
elemHtml += '<option value="-1" data-name="请选择">请选择</option>';
for(var m = 0; m < citys.length; m++) {
var oneCity = citys[m];
elemHtml += "<option value='"+oneCity[0]+"' data-name='"+oneCity[1]+"'>"+oneCity[1]+"</option>";
}
$(_config.cityId).html(elemHtml); if(_config.isSelect) {
$($(_config.cityId + " option")[1]).attr("selected",'true');
if(this.cityCode) {
self._setSelectCode(_config.cityId,this.cityCode);
}
}
self._selectChangeCode(); _config.cityCallBack && $.isFunction(_config.cityCallBack) && _config.cityCallBack();
},
/*
* 渲染市对应的区数据
* @method _areaFunc {private}
*/
_areaFunc: function(){
var self = this,
_config = self.config; var provOpt = $($(_config.provId + ' option')[0]).attr("value"),
cityOpt = $($(_config.cityId + ' option')[0]).attr("value"); var provIndex = $(_config.provId).get(0).selectedIndex,
cityIndex = $(_config.cityId).get(0).selectedIndex,
elemHtml = "",
prov,
citys,
areas,
oneCity;
var opthtml = '<option value="-1" data-name="请选择" selected>请选择</option>'; /*
* 如果省选择了 "请选择了" 那么省和市自动切换到请选择 那么相应的索引index-1
* 如果省没有选择 "请选择"，市选择了 "请选择" 那么市的索引index - 1
*/
if(provOpt == -1) {
provIndex--;
cityIndex--; }else if(provOpt != -1 && cityOpt == -1) {
cityIndex--;
} if(provIndex < 0 || cityIndex < 0){
$(_config.cityId).attr("data-code",'-1');
$(_config.areaId).attr("data-code",'-1');
$(_config.areaId).html(opthtml);
return;
};
prov = _config.data[provIndex];
citys = prov[2];
oneCity = citys[cityIndex];
areas = oneCity[2]; elemHtml += '<option value="-1" data-name="请选择">请选择</option>';
if(areas != null) {
for(var n = 0; n < areas.length; n++) {
var oneArea = areas[n];
elemHtml += "<option value='"+oneArea[0]+"' data-name='"+oneArea[1]+"'>"+oneArea[1]+"</option>";
} }
$(_config.areaId).html(elemHtml); if(_config.isSelect) {
$($(_config.areaId + " option")[1]).attr("selected",'true');
if(this.areaCode) {
self._setSelectCode(_config.areaId,this.areaCode);
}
}
self._selectChangeCode(); _config.areaCallBack && $.isFunction(_config.areaCallBack) && _config.areaCallBack();
},
/*
* 根据change事件来改变省市区select下拉框的data-code的值
* @method _changeSetCode private
* @param selectId 省市区select dom节点
*/
_changeSetCode: function(selectId){
var self = this,
_config = self.config;
var idx = selectId.selectedIndex, //获取选中的option的索引
option,
value,
dataValue = $(_config.provId).val();
var html = "<option data-name='请选择' value='-1' selected>请选择</option>",
provOpt = $($(_config.provId + ' option')[0]).attr("value"); if(idx > -1) {
if(dataValue == -1) {
if(provOpt != "-1") {
$(_config.provId).prepend(html);
$(_config.cityId).prepend(html);
$(_config.areaId).prepend(html);
}
$(_config.provId).attr("data-code",'');
$(_config.cityId).attr("data-code",'');
$(_config.areaId).attr("data-code",'');
}else {
option = selectId.options[idx]; //获取选中的option元素
value = $(option).val();
$(selectId).attr("data-code",value);
}
}
},
_selectChangeCode: function(){
var self = this,
_config = self.config; // 省change事件时候 省select下拉框data-code也要变化
var provId = document.getElementById(this.provid);
self._changeSetCode(provId); // 市change事件时候 市select下拉框data-code也要变化
var cityId = document.getElementById(this.cityid);
self._changeSetCode(cityId); // 区change事件时候 市select下拉框data-code也要变化
var areaId = document.getElementById(this.areaid);
self._changeSetCode(areaId);
},
/*
* 根据下拉框select属性data-code值 来初始化省下拉框的值
* @method _setSelectCode {private}
* @param selectId 下拉框的Id
*/
_setSelectCode: function(selectId,code){
var self = this,
_config = self.config; var optionElems = $(selectId + " option"); $(optionElems).each(function(index,item){
var curCode = $(item).val();
if(curCode == code) {
$(item).attr("selected",'true');
$(selectId).attr("data-code",curCode);
return;
}
});
}
};
JS省市区联动的更多相关文章
- JS省市区联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- 省市区联动JS脚本
省市区联动JS脚本 /* ***说明:省市区联动JS脚本 ***作者:Jerry Yuan */ var province=[{id:0,name:'选择省'},{id:11,name:" ...
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
- JS 省市区三级联动
JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 省市区js三级联动（原创）
看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
- 前端js 省市联动
代码下载地址 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- 记一次SQL注入实战
刚发现漏洞时,我就已经成功实现了注入,因为怕发到网上后被玩坏,一直没有发布.今天去看了看,原网页已经无法访问了,现在发出来应该就没有什么大问题了. 本文仅供学习交流,目的是为了构建更加安全的网络环境! ...
- Hbuilder配置识别逍遥安卓模拟器
最近在公司,需要开发一款智能家居APP,用到MUI框架,首先就是环境搭建,写好的APP页面,怎么跑在模拟器上运行? 我的开发环境: HBuilder版本:9.0.2.201803061935 逍遥安卓 ...
- DRF序列化/反序列化
反序列化(不推荐版):两个字段 一个为正序准备,一个为反序准备重写create update方法 1. 确定数据结构: 自己定义key book_obj = { "title": ...
- layer弹出框确定前验证:弹出消息框(弹出两个layer)
作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...
- 设计模式(13)--Chain of Responsibility(责任链模式)--行为型
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.模式定义: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一 ...
- Vue知识点（面试常见点）
v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式,缩写为':' 2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 什么是 mvvm? MVV ...
- Django. No changes detected when "makemigrations"
在修改了models.py后,有些用户会喜欢用python manage.py makemigrations生成对应的py代码. 但有时执行python manage.py makemigration ...
- Mariadb MySQL逻辑条件判断相关语句、函数使用举例介绍
MySQL逻辑条件判断相关语句.函数使用举例介绍 By:授客 QQ:1033553122 1. IFNULL函数介绍 IFNULL(expr1, expr2) 说明:假如expr1 不为NULL,则 ...
- [WPF 容易忽视的细节] —— Exception in WPF's Converter
前言: 在WPF中,Converter是我们经常要用到的一个工具,因为XAML上绑定的数据不一定是我们需要的数据. 问题: 在Converter中抛出一个异常导致程序崩溃,而且是在对未捕获异常进行集中 ...
- python appium笔记（一）：appium android环境配置及示例
(一) 简介 Appium是一个开源的自动化测试框架,可以用来测试基于iOS.Android和Firefox OS平台的原生和混合应用.该框架使用Selenium Webdriver,在执行测试时和 ...