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 相关文章推荐
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
详解jQuery事件
Jan 13 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 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中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP无限分类(树形类)
2013/09/28 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
外企求职信范文分享
2013/12/31 职场文书
公司管理建议书范文
2014/03/12 职场文书
小班上学期评语
2014/05/05 职场文书
暑期培训心得体会
2014/09/02 职场文书
捐款感谢信
2015/01/20 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python