zoukankan      html  css  js  c++  java
  • 级联列表(八大菜系)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>级联列表</title>
        <style>
           #d{
                height:200px;
                width:200px;
               border: 1px red solid;
            }
        </style>
    </head>
    <body>
    <div id="d">
    
    </div>
    <select id="s1" onchange="b1()"></select>
    <select id="s2" onchange="b2()"></select>
    <script>
        var s1=document.getElementById("s1");
        var s2=document.getElementById("s2");
        var caixi=["鲁菜","粤菜","川菜","湘菜","闽菜","浙菜","苏菜","徽菜"];
        var caiming=[["糖醋鱼","锅烧肘子"],
                ["龙虎斗","脆皮乳猪"],
                ["樟茶鸭","宫保鸡丁"],
                ["辣合蒸","麻辣椒鸡"],
                ["佛跳墙","烧生糟鸭"],
                ["叫化鸡","西湖醋鱼"],
                ["盐水鸭","松鼠桂鱼"],
                ["红烧果子狸","火腿炖团鱼"]];
        var imga=[[
            ["1.jpg"],
            ["2.jpg"]],
            [["3.jpg"],
            ["4.jpg"]],
            [["5.jpg"],
            ["6.jpg"]],
            [["7.jpg"],
            ["8.jpg"]],
            [["9.jpg"],
            ["10.jpg"]],
            [["11.jpg"],
            ["12.jpg"]],
            [["13.jpg"],
            ["14.jpg"]],
            [["15.jpg"],
            ["16.jpg"]]];
        var str="";
        for(var n=0;n<caixi.length;n++){
            str=str+"<option value="+n+">"+caixi[n]+"</option>";
        }
        s1.innerHTML=str;
        str="";
        for(var n=0;n<caiming[0].length;n++){
            str=str+"<option value="+n+">"+caiming[0][n]+"</option>";
        }
    
        s2.innerHTML=str;
        var imgb ="";
         imgb=imgb+"<img src="+imga[0][0][0]+">";
         document.getElementById("d").innerHTML=imgb;
        function b1() {
            var ft = s1.value;
            var str = "";
            for (var n = 0; n < caiming[ft].length; n++) {
                str = str + "<option value=" + n + ">" + caiming[ft][n] + "</option>";
            }
            s2.innerHTML = str;
            var imgb ="";
            imgb=imgb+"<img src="+imga[ft][0][0]+">";
            document.getElementById("d").innerHTML=imgb;
        }
        function b2(){
            var ft=s1.value;
            var sd=s2.value;
            var imgb ="";
           /* alert(imga[ft][sd][0]);*/
            imgb=imgb+"<img src="+imga[ft][sd][0]+">";
            document.getElementById("d").innerHTML=imgb;
    
        }
    </script>
    
    </body>
    </html>

    使用二位数组

  • 相关阅读:
    腾讯推出微信企业服务平台风铃
    WAP网页输入框的默认键盘类型控制
    asp.net+扫描仪+图片上传
    Web截屏插件
    java扫描仪上传文件
    web高拍仪图片上传
    网页中怎么实现客户端通过扫描仪把图像传到服务器上
    如何在Web页面里面使用高拍仪扫描上传图像
    B/S选择文件夹上传
    用java实现文件的断点续传并发下载
  • 原文地址:https://www.cnblogs.com/xy-milu/p/6014051.html
Copyright © 2011-2022 走看看