省市区联动

最新推荐文章于 2023-07-30 13:05:07 发布

一只小鸟儿

最新推荐文章于 2023-07-30 13:05:07 发布

阅读量121

点赞数

分类专栏： java js

本文链接：https://blog.csdn.net/Theshy08/article/details/115891307

版权

java 同时被 2 个专栏收录

81 篇文章 34 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16</title>
    <style>
        select {
            border: 1px solid #c9c9c9;
            background-color: #fff;
            color: #666;
            height: 28px;
            line-height: 28px;
            padding: 4px 6px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
        }
    </style>
</head>
<body>
<label for="one">省</label>
<select id="one">
    <!--<option value="">请选择省份</option>-->
</select>
<label for="two">市</label>
<select id="two">
    <!--<option value="">请选择城市</option>-->
</select>
<label for="three">区</label>
<select id="three">
    <!--<option value="">请选择区域</option>-->
</select>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">
    $(function () {
        var province = [
            {
                "name": "广东省",
                "city": [
                    {
                        "name": "广州市",
                        "area": ["越秀区", "荔湾区", "海珠区", "天河区"]
                    },
                    {
                        "name": "深圳市",
                        "area": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区"]
                    }
                ]
            },
            {
                "name": "河南省",
                "city": [
                    {
                        "name": "郑州市",
                        "area": ["中原区", "二七区", "管城回族区", "金水区"]
                    },
                    {
                        "name": "洛阳市",
                        "area": ["西工区", "老城区", "瀍河回族区", "涧西区"]
                    }
                ]
            },
            {
                "name": "江西省",
                "city": [
                    {
                        "name": "南昌市",
                        "area": ["东湖区", "西湖区", "青云谱区", "湾里区"]
                    },
                    {
                        "name": "九江市",
                        "area": ["浔阳区", "庐山区", "瑞昌市", "九江县"]
                    }
                ]
            },
        ];

        $("#two").change(function () {
            var one_index = $("#one option:selected").index();
            var two_index = $("#two option:selected").index();
            var three = $("#three");
            three.empty();
            // three.empty().append("<option>请选择区域</option>");

            if (two_index > 0) {
                var area = province[one_index].city[two_index].area;
                for (var index = 0; index < area.length; index++) {
                    three.append("<option>" + area[index] + "</option>");
                }
            }
        });

        $("#one").change(function () {
            var one_index = $("#one option:selected").index();
            var two = $("#two");
            var three = $("#three");
            two.empty();
            three.empty();
            // two.empty().append("<option>请选择城市</option>");
            // $("#three").empty().append("<option>请选择区域</option>");
            if (one_index >= 0) {
                var city = province[one_index].city;
                for (var index = 0; index < city.length; index++) {
                    two.append("<option>" + city[index].name + "</option>");
                }
                for (var i = 0; i < city[0].area.length; i++) {
                    three.append("<option>" + city[0].area[i] + "</option>");
                }
            }
        });

        init();

        function init() {
            for (var index = 0; index < province.length; index++) {
                $("#one").append("<option name='sj'>" + province[index].name + "</option>");
            }
            for (var i = 0; i < province[0].city.length; i++) {
                $("#two").append("<option  name='Sj'>" + province[0].city[i].name + "</option>");
            }

            for (var j = 0; j < province[0].city[0].area.length; j++) {
                $("#three").append("<option name='qj'>" + province[0].city[0].area[j] + "</option>");
            }
        }
    })
</script>
</body>
</html>

一只小鸟儿

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16</title> <style> select { border: 1px solid #c9c9c9; background-color: #fff; color...
复制链接

扫一扫