js用数组实现级联列表

最新推荐文章于 2022-01-25 18:11:10 发布

老施同学

最新推荐文章于 2022-01-25 18:11:10 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/guofengs/article/details/51182293

版权

个人总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

老施同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js用数组实现级联列表

菜单选择菜品类别： //定义菜品类别和数组 var menuType = ["凉菜","热菜","主食"]; var menu = [ ["拍黄瓜","泡椒凤爪","水果沙拉"], ["宫保鸡丁","红烧肉","木须肉"], ["水饺"
复制链接

扫一扫

专栏目录