js省级联动通过循环嵌套实现

最新推荐文章于 2022-12-21 09:51:32 发布

小白之小小白

最新推荐文章于 2022-12-21 09:51:32 发布

阅读量229

点赞数

分类专栏：前端文章标签： javascript visual studio code

本文链接：https://blog.csdn.net/qq_44620656/article/details/120312571

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<body>
    <select name="province" id="province" style="width: 120px;height:30px;">
        <option>省份</option>
    </select>
    <select name="city" id="citys" style="width: 120px;height:30px;margin-left: 2px">
        <option>城市</option>
    </select>
    <select name="area" id="area" style="width: 120px;height:30px;margin-left: 2px">
        <option>区/县</option>
    </select>

    <script>
        var city = [
            {
                name: '上海',
                cityList: [
                    {
                        name: '上海',
                        areaList: ['黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '南汇区', '奉贤区', '崇明县']
                    }
                ]
            },
            {
                name: '北京', cityList: [
                    { name: '北京', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云县', '延庆县'] }
                ]
            },
            {
                name: '天津', cityList: [
                    { name: '天津', areaList: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '宁河县', '静海县', '蓟　县'] }
                ]
            },
            {
                name: '重庆', cityList: [
                    { name: '重庆', areaList: ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '黔江区', '长寿区', '江津市', '合川市', '永川市', '南川市', '綦江县', '潼南县', '铜梁县', '大足县', '荣昌县', '璧山县', '梁平县', '城口县', '丰都县', '垫江县', '武隆县', '忠　县', '开　县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'] }
                ]
            },
            {
                name: '四川', cityList: [
                    { name: '成都市', areaList: ['锦江区', '青羊区', '金牛区', '武侯区', '成华区', '龙泉驿区', '青白江区', '新都区', '温江县', '金堂县', '双流县', '郫　县', '大邑县', '蒲江县', '新津县', '都江堰市', '彭州市', '邛崃市', '崇州市'] },
                    { name: '自贡市', areaList: ['自流井区', '贡井区', '大安区', '沿滩区', '荣　县', '富顺县'] },
                    { name: '攀枝花市', areaList: ['东　区', '西　区', '仁和区', '米易县', '盐边县'] },
                    { name: '泸州市', areaList: ['江阳区', '纳溪区', '龙马潭区', '泸　县', '合江县', '叙永县', '古蔺县'] },
                    { name: '德阳市', areaList: ['旌阳区', '中江县', '罗江县', '广汉市', '什邡市', '绵竹市'] },
                    { name: '绵阳市', areaList: ['涪城区', '游仙区', '三台县', '盐亭县', '安　县', '梓潼县', '北川羌族自治县', '平武县', '江油市'] },
                    { name: '广元市', areaList: ['市中区', '元坝区', '朝天区', '旺苍县', '青川县', '剑阁县', '苍溪县'] },
                    { name: '遂宁市', areaList: ['船山区', '安居区', '蓬溪县', '射洪县', '大英县'] },
                    { name: '内江市', areaList: ['市中区', '东兴区', '威远县', '资中县', '隆昌县'] },
                    { name: '乐山市', areaList: ['市中区', '沙湾区', '五通桥区', '金口河区', '犍为县', '井研县', '夹江县', '沐川县', '峨边彝族自治县', '马边彝族自治县', '峨眉山市'] },
                    { name: '南充市', areaList: ['顺庆区', '高坪区', '嘉陵区', '南部县', '营山县', '蓬安县', '仪陇县', '西充县', '阆中市'] },
                    { name: '眉山市', areaList: ['东坡区', '仁寿县', '彭山县', '洪雅县', '丹棱县', '青神县'] },
                    { name: '宜宾市', areaList: ['翠屏区', '宜宾县', '南溪县', '江安县', '长宁县', '高　县', '珙　县', '筠连县', '兴文县', '屏山县'] },
                    { name: '广安市', areaList: ['广安区', '岳池县', '武胜县', '邻水县', '华莹市'] },
                    { name: '达州市', areaList: ['通川区', '达　县', '宣汉县', '开江县', '大竹县', '渠　县', '万源市'] },
                    { name: '雅安市', areaList: ['雨城区', '名山县', '荥经县', '汉源县', '石棉县', '天全县', '芦山县', '宝兴县'] },
                    { name: '巴中市', areaList: ['巴州区', '通江县', '南江县', '平昌县'] },
                    { name: '资阳市', areaList: ['雁江区', '安岳县', '乐至县', '简阳市'] },
                    { name: '阿坝藏族羌族自治州', areaList: ['汶川县', '理　县', '茂　县', '松潘县', '九寨沟县', '金川县', '小金县', '黑水县', '马尔康县', '壤塘县', '阿坝县', '若尔盖县', '红原县'] },
                    { name: '甘孜藏族自治州', areaList: ['康定县', '泸定县', '丹巴县', '九龙县', '雅江县', '道孚县', '炉霍县', '甘孜县', '新龙县', '德格县', '白玉县', '石渠县', '色达县', '理塘县', '巴塘县', '乡城县', '稻城县', '得荣县'] },
                    { name: '凉山彝族自治州', areaList: ['西昌市', '木里藏族自治县', '盐源县', '德昌县', '会理县', '会东县', '宁南县', '普格县', '布拖县', '金阳县', '昭觉县', '喜德县', '冕宁县', '越西县', '甘洛县', '美姑县', '雷波县'] },
                    { name: '其他', areaList: ['其他'] }
                ]
            }
        ];

        //获取省份
        var province = document.getElementById('province')
        //获取市
        var citys = document.getElementById('citys')
        //获取区
        var area = document.getElementById('area')
    
        var fun = function(){
            //循环第一步：把省放进select框中
            for(var i = 0;i < city.length;i++){
                //运用new Option("文本","值")方法添加选项option
                province.options[province.length] = new Option(city[i].name);
                //循环第二步：把所有的市放进select
                province.onchange = function(){
                    citys.options.length = 0;
                    citys.options[citys.length] = new Option("城市")
                    area.options.length = 0;
                    area.options[area.length] = new Option("区/县")
                    //selectedIndex返回被选中选项的索引
                    for(var j = 0; j < city[province.selectedIndex - 1].cityList.length;j++){
                        citys.options[citys.length] = new Option(city[province.selectedIndex-1].cityList[j].name)
                    }
                }
                citys.onchange = function(){
                    area.options.length = 0;
                    area.options[area.length] = new Option("区/县")
                    for(var k = 0;k < city[province.selectedIndex - 1].cityList[citys.selectedIndex - 1].areaList.length;k++){
                        area.options[area.length] = new Option(city[province.selectedIndex - 1].cityList[citys.selectedIndex - 1].areaList[k])
                    }
                }
            }
        }
        fun()
    </script>
</body>

转自https://www.cnblogs.com/wujiancai/articles/11956290.html

小白之小小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js省级联动通过循环嵌套实现

<body> <select name="province" id="province" style="width: 120px;height:30px;"> <option>省份</option> </select> <select name="city" id="citys" style="width: 120px;height:30px;margin-left: 2px"> ..
复制链接

扫一扫