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提交并解析后台返回的XML的代码
Nov 03 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
在vue中嵌入外部网站的实现
Nov 13 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
浅谈numpy生成数组的零值问题
2018/11/12 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
django rest framework 自定义返回方式
2020/07/12 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
电工技术比武方案
2014/05/11 职场文书
青年志愿者活动方案
2014/08/17 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
车间统计员岗位职责
2015/04/14 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技