首页 > 代码库 > js简单菜单三级联动

js简单菜单三级联动

2024-09-19 02:20:41   210人阅读

<!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=http://www.mamicode.com/"+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=http://www.mamicode.com/"+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=http://www.mamicode.com/"+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=http://www.mamicode.com/‘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>

技术分享
技术分享

 

js简单菜单三级联动


联系
我们