Javascript 使用ajax从文件中读取数据

我正在编写一个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:

    }
});

开关（My省）{
“巴基斯坦”案：
$.ajax({
键入：“获取”，
url:“file/country/Pakistan.txt”，
数据类型：“文本”，
成功：功能（响应）{
var arrayProvince=response.split（'，'）；
对于（变量i=0；i

这是我的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>

国家
国家
巴基斯坦
美国
俄罗斯
中国
州/省
城市

您需要在每个

案例

块的末尾使用

中断；

---

请参阅：

我从省选择中删除了您的

开关。您可以对国家/地区执行相同操作，因此您的代码将显著缩短，不会重复，并且更易于维护


$（函数（）{
$（'#country'）。更改（函数（）{
$.ajax({
键入：“获取”，
网址：“Pakistan.txt”，
数据类型：“文本”，
成功：功能（响应）{
var arrayProvince=response.split（'，'）；
对于（变量i=0；i
仅供参考，而不是像那样复制和粘贴代码，您可以使用
url:“file/Province/”+myCity+“.txt”，
谢谢这样我就可以摆脱switch语句了。我会更新它的，请阅读。我知道switch语句@MikeMcCaughan的用法。但只是忘了在每个案例的结尾添加break。但这并不能解决我的问题。之前添加的城市仍然显示在选择框中，尽管它应该早就出现了。thanks用于提及，但即使在添加了break之后；在每个案例块的末尾，它也不起作用。在第二次更改时，添加了第一次更改的选项不会被删除。新选项在先前添加的行下方追加。我的意思是此代码$（“#city”）。查找（“选项：不（：first）”。删除（）；仍然没有完成工作请添加一些解释，说明此代码为什么/如何帮助OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅。就在刚才，我完全按照此方式更改了我的代码。它起了作用。当我看到您的代码时，我惊讶地发现它与我编写的代码完全相同。非常感谢您不过我还是需要帮助。
$(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>');
        }
      }
    });
  });

});