您的位置：首页 > Web前端 > JavaScript

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

2016-04-23 15:40 609 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航