《js基础-中国城市筛选》js读取json文件

最新推荐文章于 2024-04-01 09:49:29 发布

刘贵庆

最新推荐文章于 2024-04-01 09:49:29 发布

阅读量1.9w

点赞数

分类专栏： js 前端 json 文章标签： js json ajax 选择城市选择省市

本文为博主原创文章，未经博主允许请勿转载，切勿用于商业用途，若有引用请加原文链接。

本文链接：https://blog.csdn.net/xysxlgq/article/details/119582062

版权

前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

36 篇文章 1 订阅

订阅专栏

json

11 篇文章 0 订阅

订阅专栏

前述：终于抽出时间，整理了一些编程所需基础知识。

请提前看：

1、《js基础-select选择标签》https://blog.csdn.net/xysxlgq/article/details/119580815
2、《js读取本地json文件》https://blog.csdn.net/xysxlgq/article/details/119568570

中国城市筛选：

方法二：js中国城市筛选

先看效果：

1、先生成省份信息；

2、选择需要的省份后城市列中生成城市数据。

主要code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国城市筛选</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
中国城市：
<div>
    省份：<select class="st_css_province" id="st_id_province" onchange="st_province()"></select>
    城市：<select class="st_css_city" id="st_id_city"></select>
</div>
<script type="text/javascript">
    var select = document.getElementById('st_id_province');
    var city = document.getElementById('st_id_city');

    var json;//必须异步才可定全局变量。
    $.ajax({
        url: "ChinaCity.json",
        type: "get",
        dataType: "json",
        async: false,//异步
        success: function (data) {
            json = data;
        }
    });
    var jsonobj = eval(json.provinces);
    //省份
    var option = document.createElement('option');
    option.value = "--------请选择：--------";
    option.innerText = "--------请选择：--------";
    select.appendChild(option);
    for (i = 0; i < jsonobj.length; i++) {
        var option = document.createElement('option');
        var province = jsonobj[i].provinceName;
        option.value = province;
        option.innerText = province;
        select.appendChild(option);
    }

    //城市
    function st_province() {
        var value = select.options[select.selectedIndex].value;
        if (select.selectedIndex > 0) {
            city.length=0;
            var option = document.createElement('option');
            option.value = "--------请选择：--------";
            option.innerText = "--------请选择：--------";
            city.appendChild(option);
            for (i = 0; i < jsonobj.length; i++) {
                if (jsonobj[i].provinceName == value) {
                    if (jsonobj[i].citys.length > 0) {
                        for (citysvalue in jsonobj[i].citys) {
                            var cityname = jsonobj[i].citys[citysvalue].citysName;
                            var option = document.createElement('option');
                            option.value = cityname;
                            option.innerText = cityname;
                            city.appendChild(option);
                        }
                    }
                }
            }
        }
    }
</script>
</body>
</html>

json格式如：

json城市文件：

<script type="text/javascript" src="http://www.shicishu.com/down/provincecity.data.min.js"></script>

<script type="text/javascript" src="http://www.shicishu.com/down/provincecity.min.js"></script>

刘贵庆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
《js基础-中国城市筛选》js读取json文件

前述：终于抽出时间，整理了一些编程所需基础知识。请提前看：1、《js基础-select选择标签》https://blog.csdn.net/xysxlgq/article/details/1195808152、《js读取本地json文件》https://blog.csdn.net/xysxlgq/article/details/119568570中国城市筛选：先看效果：1、先生成省份信息；2、选择需要的省份后城市列中生成城市数据。主要code：<!DOCT.
复制链接

扫一扫