省市区三级联动

最新推荐文章于 2023-07-11 09:21:45 发布

黄大帅@lz

最新推荐文章于 2023-07-11 09:21:45 发布

阅读量672

点赞数 1

分类专栏：前端（html+css+js）文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/gua_Piter/article/details/128719313

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、省市区三级联动要求

通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级
当点击第一级下拉菜单，第二级菜单的内容会自动匹配:选择第二级菜单时，第三级菜单会自动生成。
当我取消上一级菜单的选项时，次一级选项会自动消失。

二、实验原理

巧妙地运用了一维数组，还利用js数组名称可为汉字，
运用了两个函数，onchange，当其value值改变的时候，他会执行自己所书写的代码

三、实验效果

省市区三级联动

四、原代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        .box{
            position: absolute;
            top:40%;
            left:40%;
        }
        select{
            width: 250px;
            height: 50px;
            border-radius: 10px;
            margin-left: 15px;
            font-size: 25px;
            text-align: center;
        } 
        select.value{
            font-size: 25px;
        }
        option{
            font-size: 25px;
        }  
        p{
            font-size: 50px;
        }
        span{
            font-size: 35px;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p >地区：</p>
        <select id="provience" size="1">
            <option value="-1" >请选择</option>
        </select>
        <span>省</span>
        <select id="cite">
            <option value="-1" >请选择</option>
        </select><span>市</span>
        <select id="contry">
            <option value="-1" >请选择</option>
        </select><span>区</span>
    </div>

    <script>
        var provience = document.querySelector("#provience")
        var cite = document.querySelector("#cite")
        var contry = document.querySelector("#contry")

        var provienceArr = ['贵州','四川','江苏']
        var citeArr = new Array();
        var contryArr = new Array() 
        //创建以省为标签的数组
        citeArr['贵州'] = ['贵阳','遵义','毕节']
        citeArr['四川'] = ['成都','资阳']
        citeArr['江苏'] = ['南京','扬州']
        //创建以市为标签的数组
        contryArr['贵阳'] = ['花溪','乌当','云岩']
        contryArr['遵义'] = ['红花岗','汇川','播州']
        contryArr['毕节'] = ['辖七星关','大方','黔西']
        contryArr['成都'] = ['武侯','锦江','青羊']
        contryArr['资阳'] = ['雁江','天体','纳怕']
        contryArr['南京'] = ['江宁','六合','溧水']
        contryArr['扬州'] = ['邗江','广陵','江都']
        
        for(let i in provienceArr) {
            provience.add(new Option(provienceArr[i],provienceArr[i]))//new OPtion(text（属性名称），value（值）)
        }

        //定义一个函数，使得创建城市与区下的option
        function creatOption(obj,data){
            for(var i in data){
                var place = new Option(data[i],data[i])
                obj.add(place);
            }
            
        }


        //利用一个函数（onchange），当期内部value变化的时候，其会跟着进行自己所写的函数
        //创建区
        cite.onchange = function(){
            contry.length = 0;
            creatOption(contry,contryArr[cite.value])
        }
        //创建市
        provience.onchange = function(){
            cite.length = 0;
            creatOption(cite,citeArr[provience.value])
            cite.onchange()
        }
    </script>
</body>
</html>

黄大帅@lz

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
省市区三级联动

通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级当点击第一级下拉菜单，第二级菜单的内容会自动匹配:选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
复制链接

扫一扫