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 相关文章推荐
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
js实现表格字段排序
Feb 19 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
js实现下拉菜单效果
Mar 01 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
js Proxy的原理详解
May 25 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
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php实现算术验证码功能
2018/12/05 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python如何统计序列中元素
2020/07/31 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python之循环结构
2019/01/15 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python实现udp聊天窗口
2020/03/31 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
汽车机电维修工求职信
2014/09/30 职场文书
结婚堵门保证书
2015/05/08 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL