javascript级联菜单实现案例（使用纯JavaScript）

悠悠 2022-08-21 07:52 179阅读 0赞

<!TYPEDOC html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>级联菜单</title>  
  
</head>  
<body>  
<select id="mainMenu" onChange="change()">  
  
</select>  
<select id="subMenu">  
  
</select>  
<script>  
  
//定义两个数组，用来存放select的option  
var mainMenuOption=\['水果','主食','蔬菜'\];  
var subMenuOption=\[\["香蕉","菠萝"\],\["面条","馒头"\],\["西红柿","黄瓜"\]\];  
  
var mainMenu=document.getElementById("mainMenu");  
var str="";  
//定义变量str用于将数组编程字符串  
for(var i =0;i<mainMenuOption.length;i++)\{  
str=str+"<option value='"+i+"'>"+mainMenuOption\[i\]+"</option>";  
\}   
mainMenu.innerHTML=str;  
str="";  
var subMenu =document.getElementById("subMenu");  
for(var i =0 ; i<subMenuOption\[0\].length  ;i++)\{  
str=str+"<option value='"+i+"'>"+subMenuOption\[0\]\[i\]+"</option>";  
\}  
subMenu.innerHTML=str;  
  
  
function change()\{  
//清空subMain  
subMenu.innerHTML="";  
str="";  
var value= parseInt(mainMenu.value);  
for(var i=0;i<subMenuOption\[value\].length ;i++)\{  
str=str+"<option value='"+i+"'>"+subMenuOption\[value\]\[i\]+"</option>";  
\}   
subMenu.innerHTML=str;   
\}  
</script>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax案例---实现级联列表

目录 Ajax案例---实现级联列表代码： select.html List.java 效果： -------------------- Ajax案例---实

痛定思痛。/ 2024年03月22日 17:21/ 0 赞/ 66 阅读

相关 Android - 编写带有级联菜单的菜单

在Android应用程序中，菜单是一种常见的用户界面元素，用于提供各种选项和功能。Android的菜单系统允许您创建级联菜单，这是一种具有子菜单的菜单。本文将指导您如何在And

分手后的思念是犯贱/ 2024年02月27日 07:05/ 0 赞/ 64 阅读

相关 php二级级联,用php+javascript实现二级级联菜单的制作

大体思路是这样的：为了不让先前的页面刷新，我用iframe潜入了一个二级子页面，用来读取数据库中的数据，最后把想要的数据传递给父级页面，完成数据的选择和转移。主要程序代码如

以你之姓@/ 2023年01月18日 15:27/ 0 赞/ 30 阅读

相关 javascript级联菜单实现案例（使用纯JavaScript）

<!TYPEDOC html> <html> <head> <meta charset="utf-8"> <title>级联菜单</title> </

悠悠/ 2022年08月21日 07:52/ 0 赞/ 180 阅读

相关纯javascript 下拉按钮菜单插件实现（处理兼容性）

插件分为三部分，html，css，js 目录结构如下图所示： ![目录结构][20160119142223343] html代码： <body>

迈不过友情╰/ 2022年08月19日 14:12/ 0 赞/ 16 阅读

相关 JavaScript-基于JSON级联列表实现

JavaScript\-基于JSON\\级联列表\\实现全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1]

迈不过友情╰/ 2022年06月11日 04:46/ 0 赞/ 363 阅读

相关 JavaScript实战-基于数组的级联列表实现

JavaScript实战-基于数组的级联列表实现全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] !

骑猪看日落/ 2022年06月11日 03:59/ 0 赞/ 679 阅读

相关 Javascript（四）javascript实现级联菜单

要实现这个功能，我们需要做三个步骤：定义省和对应市的数据结构。利用省份下拉框的选项改变事件onChange。根据用户选择的省份，动态添加城市下拉框的值

r囧r小猫/ 2022年05月17日 02:59/ 0 赞/ 191 阅读

相关 javascript使用select标签如何实现省市联动,级联下拉列表

select对象属性： options：获得所有的option对象,返回option的数组 selectIndex：获得当前选中项在option中的索引号方

Dear 丶/ 2022年05月16日 20:33/ 0 赞/ 474 阅读

相关 jQuery--动态级联菜单

前言内容显示效果： HTML代码： CSS代码： J

拼搏现实的明天。/ 2021年09月27日 05:00/ 0 赞/ 480 阅读