<!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>
