javascript实现二级菜单联动源码---人人看的懂！

最新推荐文章于 2021-10-19 10:57:33 发布

晨丶曦

最新推荐文章于 2021-10-19 10:57:33 发布

阅读量945

点赞数 1

分类专栏： javascript 文章标签： javascript 人人源码地图

本文链接：https://blog.csdn.net/sheng6110/article/details/50160797

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里实现的是一个直辖市的地图二级联动列表：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>两级联动</title>
</head>
<body>
<h3>直辖市</h3>
<!--市的下拉列表-->
<select id="select1" onchange="change()"></select>
<!--区的下拉列表-->
<select id="select2"></select>

<!--javascript部分-->
<script>
    //市级数组
    var shi=document.getElementById("select1");
    var all_shi=["北京市","上海市","天津市","重庆市"];
    //将所有的直辖市在第一个列表中显示
    var flag="";
    for(var i=0;i<all_shi.length;i++){
        flag=flag+"<option value='"+i+"'>"+all_shi[i]+"</option>";
        shi.innerHTML=flag;
    }
    //各区的数组（各区的数组的下标对应的是该市的数组的下标）
    var qu=document.getElementById("select2");
    var all_qu=[
            ["东城区","西城区","朝阳区","海淀区","石景山区","丰台区","宣武区","崇文区","顺义区","怀柔区","密云县","延庆县","昌平区","平谷区","门头沟区","房山区","通州区"],
            ["普陀区","静安区","杨浦区","黄浦区","南汇区","嘉定区","徐汇区","奉贤区","闸北区","卢湾区","长宁区","闵行区","青浦区","金山区","宝山区","虹口区","浦东新区","崇明岛"],
            ["和平区","河西区","河东区","红桥区","南开区","河北区","西青区","津南区","北辰区","东丽区","汉沽","宝坻","静海","宁河","武清"],
            ["万州区","黔江区","涪陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","渝北区","巴南区","长寿区","江津区","合川区","永川区","南川区","綦江区","大足区","铜梁区","璧山区"]
                 ];
    //将默认的北京市的所有区在第二个列表中显示
        flag="";
    for(var n=0;n<all_qu[0].length;n++){
        flag=flag+"<option>"+all_qu[0][n]+"</option>";
        qu.innerHTML=flag;
    }

    //市级部分的回调函数
    function change(){
       //获取第一个列表对象
        flag="";
        for(var j=0;j<all_qu[shi.value].length;j++){
            flag=flag+"<option>"+all_qu[shi.value][j]+"</option>";
            qu.innerHTML=flag;
        }
    }
</script>
</body>
</html>

晨丶曦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript实现二级菜单联动源码---人人看的懂！

这里实现的是一个直辖市的地图二级联动列表：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>两级联动</title></head><body><h3>直辖市</h3><select id="select1" onchange="change()"></sele
复制链接

扫一扫