级联列表(八大菜系)

<!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>
使用二位数组