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

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

请参阅：https://www.w3schools.com/js/js_switch.asp

Answer 2

我从省选择中移除了switch。您可以为国家/地区执行相同操作，因此您的代码将显着缩短，无需重复且更易于维护。

Plunker

$(function() {

  $('#country').change(function() {
    $.ajax({
      type: "GET",
      url: "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();

    $.ajax({
      type: "GET",
      url: myCity + ".txt",
      dataType: "text",
      success: function(object) {
        $("#city").find("option:not(:first)").remove();

        var arrayCity = object.split(',');
        for (var j = 0; j < arrayCity.length; j++) {
          $('#city').append('<option>' + arrayCity[j] + '</option>');
        }
      }
    });
  });

});

使用ajax从文件读取数据

2 个答案: