JavaScript实现联动菜单特效


Posted in Javascript onJanuary 07, 2020

一篇关于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对象,根据省下拉框的值来查找是二维数组中的那一行数据,然后循环该地区城市来拼接列表项,最后添加到市的下拉框中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
vue获取form表单的值示例
Oct 29 Javascript
Vuex的实战使用详解
Oct 31 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
JS实现电商商品展示放大镜特效
Jan 07 #Javascript
JS实现字体背景跑马灯
Jan 06 #Javascript
JS实现音乐钢琴特效
Jan 06 #Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 #Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 #Javascript
Vue前端项目部署IIS的实现
Jan 06 #Javascript
Vue学习之常用指令实例详解
Jan 06 #Javascript
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP文件操作方法汇总
2015/07/01 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Add a Table to a Word Document
2007/06/15 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue中component组件的props使用详解
2017/09/04 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python使用建议技巧分享(三)
2020/08/18 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
.NET面试问题集
2015/12/08 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
工程业务员岗位职责
2013/12/31 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
营销计划书范文
2015/01/17 职场文书