简单的省份城市三级联动

最新推荐文章于 2024-01-19 23:44:06 发布

Hackers luthiers

最新推荐文章于 2024-01-19 23:44:06 发布

阅读量797

点赞数

分类专栏： JavaScript 文章标签： javascript vscode

本文链接：https://blog.csdn.net/qq_57218752/article/details/122309762

版权

JavaScript 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

省三级联动

使用JavaScript 来做一个简单的省三级联动
直接进入主题吧
首先我们先看看效果图请添加图片描述
这是一个初步的效果图，我在这里设计的一个h1标题，然后是我们的省三级联动。
这个是我们想要的效果图之一，这里我们要做到点击省份的时候后面的市和区不要出现

然后就是一个三级联动的效果
这就是一个三级联动的效果图，在这里我们用了数组的形式进行一个代码的编写，代码如下：

!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>省份城市三级联动</title>
    <h1 align="center">省份城市三级联动</h1>
</head>

<body>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select id="city"> </select>
    <select id="country"> </select>
    <script>
        //省份数组
        var provinceArr = ['上海', '江苏', '山西'];
        //市区数组
        var cityArr = [
            ['上海市'],
            ['苏州市', '泰州市'],
            ['太原市', '吕梁市']
        ];
        //区域数组
        var countryArr = [
            [['黄埔区', '浦东区'],
            ],

            [
                ['虎丘区', '吴中区', '相城区'],
                ['广陵区', '江都区'],
            ],
            [
                ['万柏林区', '杏花岭区', '小店区'],
                ['文水', '离石', '交城']
            ],

        ];

        function createOption(obj, data) {
            for (var i in data) {
                var op = new Option(data[i], i);
                obj.options.add(op);
            }
        }
        var province = document.getElementById('province');
        createOption(province, provinceArr);

        var city = document.getElementById('city');
        province.onchange = function () {
            city.options.length = 0;
            createOption(city, cityArr[province.value]);
        };

        var country = document.getElementById('country');
        city.onchange = function () {
            country.options.length = 0;
            createOption(country, countryArr[province.value][city.value]);
        };

        province.onchange = function () {
            city.options.length = 0;
            createOption(city, cityArr[province.value]);
            if (province.value >= 0) {
                city.onchange();
            } else {
                country.options.length = 0;
            }

        };
    </script>

</body>

</html>

Hackers luthiers

关注

0
点赞
踩
5

收藏

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

省三级联动使用JavaScript 来做一个简单的省三级联动直接进入主题吧首先我们先看看效果图这是一个初步的效果图，我在这里设计的一个h1标题，然后是我们的省三级联动。这个是我们想要的效果图之一，这里我们要做到点击省份的时候后面的市和区不要出现然后就是一个三级联动的效果这就是一个三级联动的效果图，在这里我们用了数组的形式进行一个代码的编写，代码如下：!DOCTYPE html><html><head> <meta charset="UTF-
复制链接

扫一扫