JavaScript实现的联动菜单特效示例


Posted in Javascript onJuly 08, 2019

本文实例讲述了JavaScript实现的联动菜单特效。分享给大家供大家参考,具体如下:

博主昨天发布了一篇关于JavaScript特效的文章,今天呢给大家带来联动菜单特效,这可能是一个系列哦!

效果图

和以前一样,先发效果图,然后在进行讲解。

JavaScript实现的联动菜单特效示例

代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <link rel="stylesheet" href="">
</head>
<body>
 <h1>联动菜单</h1>
 <select id="province" onchange="ld();">
  <option value="-1">请选择</option>
  <option value="0">安徽</option>
  <option value="1">浙江</option>
 </select>
 <select id="city">
 </select>
</body>
<script>
 //定义地区数组
 var area = [
  ['安庆','黄山','合肥'],
  ['杭州','温州','宁波']
 ];
 //联动函数
 function ld(){
   var province = document.getElementById('province');//找到省对象
   var city = document.getElementById('city');//找到市对象
   var opt = '';
   //如果是请选择,就显示空,并结束函数
   if(province.value == -1){
   city.innerHTML = opt;
   return ;
   }
   for(var i = 0 ,len = area[province.value].length;i < len;i++){
   opt += '<option value="'+i+'">'+area[province.value][i]+'</option>';
   }
   city.innerHTML = opt;
 }
</script>
</html>

功能讲解

首先创建好页面,然后让省下拉框响应onchange事件,onchange事件响应的条件是下拉框的值发生改变时,这里我让onchange事件响应到ld函数中。此外我还定义了一个地区的二维数组,然后查找dom对象,根据省下拉框的值来查找是二维数组中的那一行数据,然后循环该地区城市来拼接列表项,最后添加到市的下拉框中。

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 #Javascript
Vue实现拖放排序功能的实例代码
Jul 08 #Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
You might like
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php简单图像创建入门实例
2015/06/10 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python实现k-means算法
2018/02/23 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2014年内勤工作总结
2014/11/24 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
听课评课活动心得体会
2016/01/15 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js