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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 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
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
在Python中定义一个常量的方法
2018/11/10 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
互联网创业计划书的书写步骤
2014/01/28 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
房地产项目建议书
2014/03/12 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
Python实现简繁体转换
2021/06/07 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android