js用数组实现级联列表

来源：互联网发布：iphone5s没有4g网络编辑：程序博客网时间：2024/06/07 09:15

<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" onchange="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 ;

0 0