用JavaScript实现省份城市的三级联动

最新推荐文章于 2023-11-03 23:41:48 发布

程序yan

最新推荐文章于 2023-11-03 23:41:48 发布

阅读量2.2k

点赞数 1

分类专栏： JavaScript 文章标签： html5 html

本文链接：https://blog.csdn.net/m0_46149638/article/details/120610174

版权

JavaScript 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

简单的三级联动代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省份城市的三级联动</title>
    <style>
select{ width:150px; height:35px;}
</style>
</head>
<body>
<select class="sheng">
    <option>请选择</option>  //为省份设置一个默认值，为用户在选择时提供一个友好提示
</select>
<span>省</span>
<select class="shi">
</select>
<span>市</span>
<select class="qu">
</select>
<span>区</span>

<script>
        //获取到三个选择列表
        var shengSelect =document.querySelector(".sheng");
        var shiSelect =document.querySelector(".shi");
        var quSelect =document.querySelector(".qu");

        var shenglist=['广东','广西壮族自治区','湖南'];
        var shilist=[['广州','深圳','东莞'],['南宁','桂林','柳州'],['长沙','株洲','邵阳']];
        var qulist=[
            [['广1区','广2区','广3区'],['深1区','深2区','深3区'],['东1区','东2区']],
            [['南1区','南2区','南3区'],['桂1区','桂2区','桂3区'],['柳1区','柳2区']],
            [['长1区','长2区','长3区'],['株1区','株2区','株3区'],['邵1区','邵2区','邵3区']]
        ];
        //选择省的下标
        var shengIndex =0;
        //加载省
        for(var i=0;i<shenglist.length;i++){
            var shengOption = new Option(shenglist[i]);
            shengSelect.options.add(shengOption);
        }
        //选择省后加载市
        shengSelect.onchange =function(eve){
            shengIndex =eve.target.selectedIndex-1;
            if(shengIndex == -1){
                shiSelect.options.length= 0;
                quSelect.options.length=0;
            }else{
                shiSelect.options.length= 0;
                quSelect.options.length=0;
                for(var j=0;j<shilist.length;j++){
                    var shiOption =new Option(shilist[shengIndex][j]);
                    shiSelect.options.add(shiOption);
                }
                //加载市的同时，加载第一个市的全部区
                for(var k=0;k<qulist[shengIndex][0].length;k++){
                    var quOption =new Option(qulist[shengIndex][0][k]);
                    quSelect.options.add(quOption);
                }
            }
        }　　　　　//选择市后加载区
        shiSelect.onchange=function(eve){
            var shiIndex =eve.target.selectedIndex;
            quSelect.options.length =0;
            for(var n =0;n<qulist[shengIndex][shiIndex].length;n++){
                var quOption =new Option(qulist[shengIndex][shiIndex][n]);
                quSelect.options.add(quOption);
            }
        }
    </script>
</body>
</html>

运行结果截图：

程序yan

关注

1
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
0
评论
用JavaScript实现省份城市的三级联动

简单的三级联动代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省份城市的三级联动</title> <style>select{ width:150px; height:35px;}</style></head><body><select class
复制链接

扫一扫