<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html></span>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单选择</title>
</head>
<body>
菜品类别:
<select id="sType" οnchange="change()"></select>
<select id="sMenu"></select>
<script>
//定义菜品类别和数组
var menuType = ["凉菜","热菜","主食"];
var menu = [
["拍黄瓜","泡椒凤爪","水果沙拉"],
["宫保鸡丁","红烧肉","木须肉"],
["水饺","馒头","米饭"],
]
var sType = document.getElementById("sType");
var sMenu = document.getElementById("sMenu");
var str = "";
//将数组内容复制到标签中
for(var n=0;n<menuType.length;n++){
str+="<option value='"+n+"'>"+menuType[n]+"</option>"
}
sType.innerHTML=str;
var str = "";
//显示列表
for(var n=0;n<menu[0].length;n++){
str+="<option>"+menu[0][n]+"</option>";
}
sMenu.innerHTML=str;
function change() {
// alert(sType.value);
//当菜品类别改变时修改菜品
sMenu.innerHTML="";//先清空
str=""
for(var n=0;n<menu[sType.value].length;n++){
str+="<option>"+menu[sType.value][n]+"</option>";
}
sMenu.innerHTML=str;
}
</script>
</body>
</html>
<pre code_snippet_id="1651948" snippet_file_name="blog_20160418_2_1514985" name="code" class="html"> for(var n=0;n<menu[sType.value].length;n++){
str+="<option>"+menu[sType.value][n]+"</option>";
}
//menu[sType.value]是行数(0-2).length =3 ;