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

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

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

相关阅读

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

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

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

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

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

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

相关 JavaScript-&& ||的案例使用

JavaScript\-&& ||的案例使用用到的知识点： 1.&&，前面条件成立的话，继续往后面执行。否则，就不继续往后执行了。 2.||，前面条件不成立的话，

- 日理万妓/ 2022年06月11日 04:59/ 0 赞/ 151 阅读

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

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

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

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

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

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

相关 JavaScript Cookie使用案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年06月08日 08:05/ 0 赞/ 138 阅读

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

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

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

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

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

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

相关 Javascript实现购物车案例--Javascript学习

JavaScript实现购物车来进行设计一个购物车的功能 html代码： <!DOCTYPE html> <html> <head>

た入场券/ 2022年01月21日 11:33/ 0 赞/ 698 阅读

相关 jQuery--动态级联菜单

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

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