<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js菜单二级联动</title>
<style>
.nav {
background:url(images/jizhongkuanghuan.jpg) no-repeat;
margin:0 auto;
height:auto;
width:100%;
overflow:hidden;}
#btn {
margin:630px auto;
width:30%;}
</style>
</head>
<body>
<div class="nav">
<div id=btn>
<select id="province" onchange="getCity()"></select>
<select id="city" onchange="getPf()"></select>
<div id="pf"></div>
</div>
</div>
<script>
var p = ["辅助","上单","中单","打野","射手"];
var c = [["锤石","琴瑟仙女","荒野嫖客","蕾欧娜","布里茨"],["瑞萌萌","潘森","诺克","无双剑姬","青钢影"],["乐芙兰","劫","亚索","复仇焰魂","潮汐海灵"],["盲僧","赵信","卡兹克","奈德丽","伊芙琳"],["麦林炮手","复仇之矛","逆羽","维鲁斯","金克斯","崔丝塔娜"]];
var f = [["chuishi","qinnv","niu","leiouna","bulici"],["ruiwen","pansen","nuoke","wushuangjianji","qinggangying"],["lefulan","jie","yasuo","huonan","xiaoyu"],["xiazi","juhua","kazike","naideli","guafu"],["mailin","fuchou","niyu","weilusi","jinlesi","xiaopao"]];
var temp = "";
for(i=0;i<p.length;i++){//循环写入
temp += "<option value="+i+">"+p[i]+"</option>";
}
document.getElementById("province").innerHTML = temp;
function getCity(){
var getProv = document.getElementById("province").value;//获取二维数组的第一个[]值
var temp = "";
for(i=0;i<c[getProv].length;i++){
//条件为一维数组的长度并非二维数组的长度
temp += "<option value="+i+">"+c[getProv][i]+"</option>";
}
document.getElementById("city").innerHTML = temp;
getPf();
}
function getPf(){
var getProv = document.getElementById("province").value;
var getCitys = document.getElementById("city").value;
var temp = "";
for(i=0;i<f[getProv].length;i++){
temp = "<img src='images/"+f[getProv][getCitys]+".jpg' title='"+f[getProv][getCitys]+"' />";
}
document.getElementById("pf").innerHTML = temp;
}
getCity();
</script>
</body>
</html>
效果演示：
