基于JS实现省市联动效果代码分享


Posted in Javascript onJune 06, 2016

在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区、品种等有多级选项时。比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变。

基于JS实现省市联动效果代码分享

思路:

1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化。

下面是造的省市的数据:

var linkDatas = {
provinces:[
{
"code":"0",
"name":"请选择"
},
{
"code":"1",
"name":"北京"
},
{
"code":"2",
"name":"天津"
},
{
"code":"3",
"name":"河北"
},
{
"code":"4",
"name":"湖北"
},
{
"code":"5",
"name":"广东"
},
{
"code":"6",
"name":"其他"
}
],
citys:{
0:[
"请选择"
],
1:[
"朝阳区",
"海淀区",
"东城区",
"西城区",
"房山区",
"其他"
],
2:[
"天津"
],
3:[
"沧州",
"石家庄",
"秦皇岛",
"其他"
],
4:[
"武汉市",
"宜昌市",
"襄樊市",
"其他"
],
5:[
"广州市",
"深圳市",
"汕头市",
"佛山市",
"珠海市",
"其他"
],
6:[
"其他"
]
}
};

2,根据数据动态生成option节点:

function addOptions(target,options){
var optionEle = null,
target = target,
option = options,
optionLen = options.length;
for(var i = 0;i < optionLen;i++){
optionEle = document.createElement('option');
optionEle.value = option[i].value;
optionEle.text = option[i].text;
target.options.add(optionEle);
}
}

3,根据上述省市数据,其中code代表“省级”指向“城市”的标识符,当省级的数据变更时,出发change事件:

pro.onchange = function(){
console.log(this);
var ct = city[this.value],
ctLen = ct.length,
ctBox = [];
c.innerHTML = ""; 
/*添加城市*/ 
for(var j = 0;j < ctLen;j++){
ctBox.push({
"text" : ct[j],
"value": ct[j]
});
}
addOptions(c,ctBox);
}

HTML代码:

<div class="content">
<h3>下拉框联动效果</h3>
<p>省份:
<select name="provinces" id="provinces">
</select>
</p>
<p>
市:
<select name="citys" id="citys">
</select>
</p>
</div>

全部JavaScript代码:

var linkDatas = {
provinces:[
{
"code":"0",
"name":"请选择"
},
{
"code":"1",
"name":"北京"
},
{
"code":"2",
"name":"天津"
},
{
"code":"3",
"name":"河北"
},
{
"code":"4",
"name":"湖北"
},
{
"code":"5",
"name":"广东"
},
{
"code":"6",
"name":"其他"
}
],
citys:{
0:[
"请选择"
],
1:[
"朝阳区",
"海淀区",
"东城区",
"西城区",
"房山区",
"其他"
],
2:[
"天津"
],
3:[
"沧州",
"石家庄",
"秦皇岛",
"其他"
],
4:[
"武汉市",
"宜昌市",
"襄樊市",
"其他"
],
5:[
"广州市",
"深圳市",
"汕头市",
"佛山市",
"珠海市",
"其他"
],
6:[
"其他"
]
}
};
function addOptions(target,options){
var optionEle = null,
target = target,
option = options,
optionLen = options.length;
for(var i = 0;i < optionLen;i++){
optionEle = document.createElement('option');
optionEle.value = option[i].value;
optionEle.text = option[i].text;
target.options.add(optionEle);
}
}
function provincesCitysLink(pro,c){
var LD = linkDatas,
provinces = LD.provinces,
city = LD.citys,
initCity = city[0],
proBox = [];
/*添加省份*/
for(var i = 0;i < provinces.length;i++){
proBox.push({
"text" : provinces[i].name,
"value": provinces[i].code
})
} 
addOptions(pro,proBox);
/*初始化城市*/
addOptions(c,[{
"text" : initCity,
"value": initCity
}]);
/*添加联动事件*/
pro.onchange = function(){
console.log(this);
var ct = city[this.value],
ctLen = ct.length,
ctBox = [];
c.innerHTML = ""; 
/*添加城市*/ 
for(var j = 0;j < ctLen;j++){
ctBox.push({
"text" : ct[j],
"value": ct[j]
});
}
addOptions(c,ctBox);
}
}
var provinces = document.getElementById('provinces'),
citys = document.getElementById('citys');
provincesCitysLink(provinces,citys);
Javascript 相关文章推荐
js href的用法
May 13 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
对象转换为原始值的实现方法
Jun 06 #Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 #Javascript
node-http-proxy修改响应结果实例代码
Jun 06 #Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 #Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 #Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 #Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 #Javascript
You might like
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python中with用法讲解
2020/02/07 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
客服专员岗位职责范本
2013/11/29 职场文书
梅花魂教学反思
2014/04/25 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
签约仪式致辞
2015/07/30 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL