省市区联动

最新推荐文章于 2022-07-28 20:49:24 发布

稳稳DE幸福

最新推荐文章于 2022-07-28 20:49:24 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

文章标签： JS

本文链接：https://blog.youkuaiyun.com/gouhuarong/article/details/52004387

本文介绍了一个简单的省市区域选择器的实现方法，通过JavaScript动态生成下拉列表的方式让用户可以选择省份、城市及区域。此选择器适用于需要用户填写详细地址的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(function(){
    var count = [
        {
            name : '四川省',
            citys : [
                {
                    name : '成都市',
                    area : ['成都1区','成都2区','成都3区'],
                },
                {
                    name : '绵阳市',
                    area : ['绵阳1区','绵阳2区','绵阳3区'],
                },
                {
                    name : '广元市',
                    area : ['广元1区','广元2区','广元3区'],
                },
            ],
        },
        {
            name : '广东省',
            citys : [
                {
                    name : '广州市',
                    area : ['广州1区','广州2区','广州3区'],
                },
                {
                    name : '东莞市',
                    area : ['东莞1区','东莞2区','东莞3区'],
                },
                {
                    name : '佛山市',
                    area : ['佛山1区','佛山2区','佛山3区'],
                },
            ],
        },
        {
            name : '河南省',
            citys : [
                {
                    name : '洛阳市',
                    area : ['洛阳1区','洛阳2区','洛阳3区'],
                },
                {
                    name : '开封市',
                    area : ['开封1区','开封2区','开封3区'],
                },
                {
                    name : '郑州市',
                    area : ['郑州1区','郑州2区','郑州3区'],
                },
            ],
        },
    ];

    var prenvice = document.getElementById('prenvice');
    var cityS = document.getElementById('city');
    var areaS = document.getElementById('area');

    readPrenvice();
    readCity(0);
    readArea(0,0);
    prenvice.onchange = function(){
        readCity(prenvice.selectedIndex);
        //readArea(prenvice.selectedIndex,cityS.selectedIndex);
        readArea(prenvice.selectedIndex,0);
    };
    cityS.onchange = function(){
        readArea(prenvice.selectedIndex,cityS.selectedIndex);
    };


    function readPrenvice(){
        var str = '';
        for(var i = 0; i < count.length; i++){
            str += '<option>' + count[i].name + '</option>';
        }
        prenvice.innerHTML = str;
    }

    function readCity(prenviceIndex){
        var city = count[prenviceIndex].citys;
        cityS.innerHTML = '';
        for(var i = 0; i < city.length; i++){
            var city1 = city[i].name;
            var option = document.createElement('option');
            option.innerHTML = city1;
            cityS.appendChild(option);
        }
    }
    function readArea(prenviceIndex,cityIndex){
        var city = count[prenviceIndex].citys;
        var area1 = city[cityIndex].area;
        areaS.innerHTML = '';
        for(var i = 0; i < area1.length; i++){
            var option = document.createElement('option');
            option.innerHTML = area1[i];
            areaS.appendChild(option);
        }
    }


})();