javascript - 使用ajax从文件中读取数据

Question

我正在编写一个 ajax 程序，我在其中从项目文件夹中创建的文件中读取数据。我在选择巴基斯坦国家/地区然后选择任何省份时遇到问题。首先是所选省份的城市，但是当我更改省份时，所有省份文件中的所有城市都会出现。我试了几个小时，但还是想不通。请任何人帮助

这是我的 jQuery/ajax 代码:

switch (myProvince) {
    case 'Pakistan':
        $.ajax({
            type:"GET",
            url: "file/country/Pakistan.txt",
            dataType: "text",
            success: function (response) {
                var arrayProvince = response.split(',');
                for (var i = 0; i < arrayProvince.length; i++) {
                    $('#province').append('<option>' + arrayProvince[i] + '</option>');
                }
            }
        });


$('#province').change(function () {
    var myCity = $('#province option:selected').text();
    $("#city").find("option:not(:first)").remove();

    switch (myCity) {
        case 'KPK':
            $.ajax({
                type: "GET",
                url: "file/Province/KPK.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var j = 0; j < arrayCity.length; j++) {
                        $('#City').append('<option>' + arrayCity[j] + '</option>');
                    }
                }
            });
        case 'Punjab':
            $.ajax({
                type: "GET",
                url: "file/Province/Punjab.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                        $('#City').append('<option>' + arrayCity[i] + '</option>');
                    }
                }
            });
        case 'Balochistan':
            $.ajax({
                type: "GET",
                url: "file/Province/Balochistan.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                        $('#City').append('<option>' + arrayCity[i] + '</option>');
                    }
                }
            });
        case 'Kashmir':
            $.ajax({
                type: "GET",
                url: "file/Province/Kashmir.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                            $('#City').append('<option>' + arrayCity[i] + '</option>');
                    }
                }
            });
        case 'Sindh':
            $.ajax({
                type: "GET",
                url: "file/Province/Sindh.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                        $('#City').append('<option>' + arrayCity[i] + '</option>');
                }
            }
        });
        default:

    }
});

这是我的 Html 代码。

<div class="row">
    <div class="col-sm-4 form-group">
        <select class="country form-control" id="country">
            Country
            <option disabled selected>Country</option>
            <option>Pakistan</option>
            <option>America</option>
            <option>Russia</option>
            <option>China</option>
        </select>
    </div>
    <div class="col-sm-4 form-group">
        <select class="country form-control" id="province">
            <option id="proDefault" disabled selected>State/Province</option>
        </select>
    </div>
    <div class="col-sm-4 form-group">
        <select class="country form-control" id="City">
            <option id="city" disabled selected>City</option>
        </select>
    </div>
</div>

Answer 1

在每个 case block 的末尾需要一个 break;。

参见:https://www.w3schools.com/js/js_switch.asp