省市区三级联动

最新推荐文章于 2024-07-10 14:03:37 发布

csdn_nevermore

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量336

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/csdn_nevermore/article/details/128653461

版权

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

原理：通过一维数组二维数组三维数组分别存储省市区的内容，
给省和市分别定义一个全局变量为点击它时候的下表数作为二维数组和三维数组的前置的值；通过for循环
将数组中的值增加到表单中
自动取消的原理：只显示一个option，每当上一级取消的时候，获取这个事件，然后定义一个只显示一个option的函数

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
</style>

<body>
    省级：<select name="" id="province">
        <option value="">请选择省份</option>
    </select>
    市级：<select name="" id="city">
        <option value="">请选择城市</option>
    </select>
    区级：<select name="" id="area">
        <option value="">请选择地区</option>
        <script>

            var province = ["江苏省", "山东省", "浙江省"]
            var city = [["南京市", "苏州市", "扬州市"], ["青岛市", "烟台市", "潍坊市"], ["杭州市", "宁波市", "温州市"]]
            console.log(city)
            var area = [[["鼓楼区", "玄武区", "建邺区"], ["高新区", "园区", "吴中区"], ["广陵区", "  邗江区", "江都区"]], [["市南区", "市北区", "黄岛区"], ["芝罘区", "福山区", "牟平区"], ["潍城区", "寒亭区", "坊子区"]], [["上城区", "下城区", "江干区"], ["海曙区", "江北区", "北仑区"], ["鹿城区", "  龙湾区", "瓯海区"]]]
            var oprovince = document.getElementById("province");
            var ocity = document.getElementById("city");
            var oarea = document.getElementById("area");
            for (var i = 0; i < province.length; i++) {
                oprovince.options.add(new Option(province[i]));
            }

            oprovince.onchange = function () {
                clearall()
                provinceindex = this.selectedIndex - 1
                console.log(provinceindex)
                for (m = 0; m < city[provinceindex].length; m++) {
                    ocity.options.add(new Option(city[provinceindex][m]));
                }

            }
            ocity.onchange = function () {
                cleararea()
                cityindex = this.selectedIndex - 1

                for (n = 0; n < area[provinceindex][cityindex].length; n++) {
                    oarea.options.add(new Option(area[provinceindex][cityindex][n]));
                }

            }
            function clearall() {
                ocity.options.length = 1
                oarea.options.length = 1
            }
            function cleararea() {
                oarea.options.length = 1
            }   
        </script>
</body>

</html>