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