原生js实现二级联动菜单
更新时间：2019年11月27日 15:28:41 作者：濮家大少
这篇文章主要为大家详细介绍了原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
[红色]教学演示-UBB,剪贴板,textRange及其他...2006-11-11
为了防止误操作，很多时候需要对鼠标滑过触发的事件进行延时处理。网易首页的选项卡好几年之前就添加了这个特性，当时我记得是采用150毫秒作为触发基准2011-03-03
前端开发的童鞋应该都知道,JavaScript是一门单线程的脚本语言,这就意味着JavaScript 代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情,这篇文章主要给大家介绍了关于JavaScript事件循环机制的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了JS 获取文件后缀，判断文件类型(比如是否为图片格式),需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JavaScript实现带箭头标识的多级下拉菜单效果,可实现横向与纵向箭头的形式标识选中菜单项位置的功能,涉及javascript针对页面元素位置的判定与样式动态操作技巧,需要的朋友可以参考下2015-08-08
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
这篇文章主要介绍了解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题,需要的朋友可以参考下2017-06-06
bootstrap3 兼容IE8浏览器！IE8浏览器并不支持这一优秀的Css3特性，Bootstrap在开发文档中写了如何使用进行兼容IE8，感兴趣的朋友可以参考一下2016-05-05
通过在网站上的资料搜集，得到了很多关于string类用法的文档，通过对这些资料的整理和加入一些自己的代码，就得出了一份比较完整的关于string类函数有哪些和怎样用的文档了！2015-08-08
JavaScript关于prototype实例详解(超重点)
prototype是js里面给类增加功能扩展的一种模式,这篇文章主要介绍了JavaScript关于prototype（超重点）,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了小程序开发之模态框组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
最新评论