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

悠悠 2022-08-21 07:52 167阅读 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 条评论，167人围观）

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

相关阅读

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

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

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

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

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

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

相关 JavaScript小练习效果之多级菜单

　　练习要求　　1，布局可以随意添加或者删除，只要保证格式完整就可以自适应js代码。　　2，每次点击只展开当前菜单，其它菜单如果有展开

朴灿烈づ我的快乐病毒、/ 2022年09月20日 05:56/ 0 赞/ 160 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 JavaScript实现下拉框动态绑定与级联功能

在Web项目开发中，经常使用下拉框的级联功能，下面将介绍如何使用JavaScript实现下拉框的动态绑定与级联功能。 1、相关知识点说明 1.1 清空下拉框选项

客官°小女子只卖身不卖艺/ 2021年09月30日 13:10/ 0 赞/ 574 阅读

相关 jQuery--动态级联菜单

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

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