<!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%;}
select { text-align:center}
</style>
</head>
<body>
<div class="nav">
<div id=btn>
<select id="province" onchange="getCity()"></select>
<select id="city" onchange="getX()"></select>
<select id="xian" onchange="getPf()"></select>
<div id="pf"></div>
</div>
</div>
<script>
var p = ["辅助","上单","中单","打野","射手"];
var c = [["锤石","琴瑟仙女","荒野嫖客","蕾欧娜","布里茨"],
["瑞萌萌","潘森","诺克","无双剑姬","青钢影"],
["乐芙兰","劫","亚索","复仇焰魂","潮汐海灵"],
["盲僧","赵信","卡兹克","奈德丽","伊芙琳"],
["麦林炮手","复仇之矛","逆羽","维鲁斯","金克斯"]];
var x = [[["skt","腥红之月"],["情人节限定","龙年限定"],["阿里斯塔","玫瑰"],["蕾欧娜","泳池派对"],["苹果机器人","擂台皇帝"]],
[["瑞文","冠军之刃"],["潘森","屠龙勇士"],["诺克","灌篮高手"],["剑姬","源计划"],["青钢影","卡密尔"]],
[["妖姬","万圣节"],["劫","源计划"],["西部牛仔","源计划"],["复仇焰魂","丧尸"],["小鱼人","大白兔"]],
[["拳皇","龙年限定"],["赵信","子龙"],["卡兹克","螳螂"],["奈德丽","豹女"],["伊芙琳","寡妇"]],
[["小炮","烈火雄心"],["卡莉斯塔","复仇之矛"],["逆羽","霞"],["情人节","苍穹之光"],["龙年限定","魔法少女"]]];
var f = [[["chuishi","chuishi2"],["qinnv2","qinnv"],["niu","niu2"],["leiouna","leiouna2"],["bulici","bulici2"]], [["ruiwen","ruiwen2"],["pansen","pansen2"],["nuoke","nuoke2"],["wushuangjianji","wushuangjianji2"],["qinggangying","qinggangying2"]],
[["lefulan","lefulan2"],["jie","jie2"],["yasuo","yasuo2"],["huonan","huonan2"],["xiaoyu","xiaoyu2"]],
[["xiazi","xiazi2"],["juhua","juhua2"],["kazike","kazike2"],["naideli","naideli2"],["guafu","guafu2"]],
[["mailin","xiaopao2"],["fuchou","fuchouzhimao2"],["niyu","niyu2"],["weilusi","weilusi2"],["jinlesi","jinlesi2"]]];
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;
getX();
}
function getX(){
var getProv = document.getElementById("province").value;
var getCitys = document.getElementById("city").value;
var temp = "";
for(i=0;i<x[getProv][getCitys].length;i++){
temp += "<option value="+i+">"+x[getProv][getCitys][i]+"</option>";
}
//alert(temp);
document.getElementById("xian").innerHTML = temp;
getPf();
}
function getPf(){
var getProv = document.getElementById("province").value;
var getCitys = document.getElementById("city").value;
var getX = document.getElementById("xian").value;
var temp = "";
for(i=0;i<f[getProv][getCitys].length;i++){
temp = "<img src='images/"+f[getProv][getCitys][getX]+".jpg' title='"+f[getProv][getCitys][getX]+"' />";
}
//alert(f[getProv][getCitys][getX]);
document.getElementById("pf").innerHTML = temp;
}
getCity();
</script>
</body>
</html>
