007真人007真人

来源:乐虎lehu国际娱乐之家  责任编辑:小易  

本文实例讲述了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代码运行工具https://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:


  • 本文相关:
  • js实多级联动下拉菜单类,简单实现省市区联动菜单!
  • js简单实现多级select联动菜单效果代码
  • 从qq网站中提取的纯js省市区三级联动菜单
  • 基于javascript实现二级联动菜单效果
  • js实现的五级联动菜单效果完整实例
  • php+js三级菜单联动菜单实现方法
  • javascript实现无限级select联动菜单
  • js 实现省市区三级联动菜单效果
  • javascript读取xml文件做一个二级联动菜单示例
  • 琥珀无限级联动菜单-javascript版
  • javascript省市区三级联动菜单效果
  • javascript 无限联动菜单效果代码
  • js 数组的for循环到底应该怎么写?
  • es6 javascript中class类继承用法实例详解
  • javascript实现移动端滑动选择日期功能
  • js判断fckeditor内容是否为空的两种形式
  • 鼠标滑在标题上显示图片的js代码
  • javascript+css 网页每次加载不同样式的实现方法
  • javascript作用域链与执行环境详解
  • javascript自定义函数判断网站访问类型是pc还是移动终端
  • 基于js文件加载优化(详解)
  • 写了个xml+tree无穷树js版
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.pradaoutletonline.net All Rights Reserved