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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
JS与C#编码解码
Dec 03 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
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
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
用cssText批量修改样式
2009/08/29 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python中的各种装饰器详解
2015/04/11 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
windows下python安装小白入门教程
2018/09/18 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python的列表List求均值和中位数实例
2020/03/03 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
Django url 路由匹配过程详解
2021/01/22 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
文员个人求职自荐信
2013/09/21 职场文书
大学生应聘自荐信
2013/10/11 职场文书
法制宣传月活动总结
2014/04/29 职场文书
建国大业电影观后感
2015/06/01 职场文书
民政局未婚证明
2015/06/15 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书