js简单菜单二级联动

最新推荐文章于 2022-06-10 18:45:19 发布

weixin_30729609

最新推荐文章于 2022-06-10 18:45:19 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liu-heng/p/6800297.html

本文介绍了一个使用JavaScript实现的菜单二级联动示例。通过预定义的数组来填充省份、城市选项，并根据所选省份显示相应的城市选项及图片。此示例展示了如何使用JavaScript操作DOM元素，实现动态网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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




效果演示：