区域联动功能

最新推荐文章于 2024-11-08 14:35:14 发布

Sodapease

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量497

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Sodapease/article/details/128689318

版权

区域联动

需求
实现原理
代码
效果展示

需求

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

实现原理

需求	实现原理
三个下拉菜单的联动	先设置三个下拉菜单，将选项内容录入js数组中
三个下拉菜单的联动	通过获取省数组下标，再得到相应市区的数组，再在市中获取相应区则同理
点击第一级下拉菜单，第二级菜单的内容会自动匹配	以上已通过数组下标对应市数组，遍历数组获取对应元素，使用appendChild()方法添加对应城市到第二个下拉菜单中
点击第一级下拉菜单，第二级菜单的内容会自动匹配
选择第二级菜单时，第三级菜单会自动生成	方法同上
取消上一级菜单的选项时，次一级选项会自动消失	添加下一级之前先清空之前的值element.options.length = 0

代码

<!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>select</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            margin: 100px auto;
        }

        div {
            margin-right: 15px;
        }

        select {
            width: 100px;
            height: 30px;
            border: 1px solid #b0b0b0;
            border-radius: 20px;
            text-align: center;
            outline: none;
        }

        #initial1,
        #initial2,
        #initial3 {
            color: #b0b0b0;
        }
    </style>
    </head>
    <body>
        <div class="container">
    
            地区：&emsp;省：
            <select name="province" id="province" onchange="changepro(this)"></select>
    
            市：
            <select name="city" id="city" onchange="changecity(this)"></select>
    
            乡：
            <select name="area" id="area"></select>
        </div>
    
    </body>
    <script>
        //将省市区录入数组
        const prodata = ['江苏', '黑龙江', '广东']

        const citydata = [
                            ['南京', '苏州', '扬州'],
                            ['哈尔滨', '齐齐哈尔', '双鸭山'],
                            ['广州', '韶关', '深圳']
                         ]
        const areadata = [[
                            ['江宁区', '玄武区', '鼓楼区'],
                            ['虎丘区', '吴中区', '相城区'],
                            ['广陵区', '邗江区', '江都区']
                        ],
                        [
                            ['道里区', '南岗区', '道外区'],
                            ['龙沙区', '建华区', '铁锋区'],
                            ['尖山区', '岭东区', '四方台区']
                        ],
                        [
                            ['荔湾区', '越秀区', '珠海区'],
                            ['武江区', '浈江区', '曲江区'],
                            ['罗湖区', '福田区', '南山区']
                        ]
                         ]
        const pro = document.getElementById('province')
        const city = document.getElementById('city')
        const area = document.getElementById('area')
        for(let i = 0;i < prodata.length; i++){
            let proOption = new Option(prodata[i],i)
            pro.appendChild(proOption)
        }
        let proIndex = -1//初始不对下一级菜单进行匹配
        //改变省份触发对应市方法
        function changepro(obj){
            let optionValue = obj.value//获得被选中省下标
            proIndex = obj.value//省下标赋值给proIndex
            let cityArr = citydata[optionValue]//得到相应城市的数组
            let areaArr = areadata[optionValue][0]//得到相应区数组
            city.options.length = 0//添加城市前先清空之前的值
            area.options.length = 0//添加区前先清空之前的值
            for(let i = 0;i < cityArr.length; i++){//遍历城市数组中的城市元素
                let proOption = new Option(cityArr[i],i)
                city.appendChild(proOption)//对应城市添加到第二个城市下拉菜单中
            }
            for(let i = 0;i < areaArr.length;i++){//遍历区数组中的区元素
                let proOption = new Option(areaArr[i],i)
                area.appendChild(proOption)//对应区添加到添加到第三个区下拉菜单中
            }
        }
        //触发城市调用对应区方法
        function changecity(obj){
            let optionValue = obj.value//得到被选中城市下标
            let areaArr = areadata[proIndex][optionValue]//得到区数组
            area.options.length = 0
            for(let i = 0;i < areaArr.length;i++){//遍历区数组中的区元素
                let proOption = new Option(areaArr[i],i)
                area.appendChild(proOption)//对应区添加到添加到第三个区下拉菜单中
            }
        }
    </script>
</html>