基于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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
微信小程序button组件使用详解
Jan 31 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jQuery 使用个人心得
2009/02/26 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
js实现小时钟效果
2020/03/25 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python内存动态分配过程详解
2019/07/15 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
创业计划书如何编写
2014/02/06 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
教师个人年终总结
2015/02/11 职场文书
专家推荐信范文
2015/03/26 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
英镑符号 £
2022/02/17 杂记
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis