原生js实现二级联动菜单


Posted in Javascript onNovember 27, 2019

本文实例为大家分享了js二级联动菜单的具体代码,供大家参考,具体内容如下

效果如下:

原生js实现二级联动菜单

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>二级联动菜单</title>
 <style>
  *{
  padding: 0px;
  margin: 0px;
  }
  form{
  width: 300px;
  height: 300px;
  margin: 10px auto;
  }
  form select{
  width: 140px;
  height: 50px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  }
 </style>
 <script>
  var x = ["请选择...","美食","景点","电影"];
  var y = [
  ["请选择..."],
  ["黄焖鸡","油焖大虾","红烧肉","东坡肉"],
  ["黄山","泰山","嵩山","华山"],
  ["烈日灼心","逆战","无间道","黑金"]
  ];
  window.onload = init;
  function init(){
  var chose1 = document.getElementById("chose1");
  var chose2 = document.getElementById("chose2");
  chose1.length = x.length;
  for(var i = 0;i<x.length;i++)
  {
   chose1.options[i].text = x[i];
  }
  var index = 0;
  chose2.length = y[index].length;
  for(var j = 0;j<y[index].length;j++)
  {
   chose2.options[j].text = y[index][j];
  }
  }
  function change(obj){
  var chose2 = document.getElementById("chose2");
  chose2.length = y[obj].length;
  for(var j = 0;j<y[obj].length;j++)
  {
   chose2.options[j].text = y[obj][j];
  }
  }
 </script>
 </head>
 <body>
 <form>
  <select id="chose1" onchange="change(this.selectedIndex)"></select>
  <select id="chose2"></select>
 </form>
 </body>
</html>

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

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 #Javascript
原生js实现下拉选项卡
Nov 27 #Javascript
浅析Vue下的components模板使用及应用
Nov 27 #Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
微信小程序表单验证WxValidate的使用
Nov 27 #Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
You might like
php 中include()与require()的对比
2006/10/09 PHP
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python实现桌面托盘气泡提示
2019/07/29 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Python调用C语言程序方法解析
2020/07/07 Python
市场部业务员岗位职责
2014/04/02 职场文书
普通话宣传标语
2014/06/26 职场文书
项目建议书
2015/02/04 职场文书
销售员自我评价
2015/03/11 职场文书