原生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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
js操作select控件的几种方法
Jun 02 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
微信小程序云开发之使用云数据库
May 17 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
微信小程序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
Mysql的常用命令
2006/10/09 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
详解Python中break语句的用法
2015/05/14 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python进行文件对比的方法
2018/12/24 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
就业自荐信
2013/12/04 职场文书
企业申诉管理制度
2014/01/30 职场文书
金融事务专业求职信
2014/04/25 职场文书
音乐教师求职信
2014/06/28 职场文书
计算机求职信
2014/07/02 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
心理健康教育主题班会
2015/08/13 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis
LeetCode189轮转数组python示例
2022/08/05 Python