ajaxを使用してファイルからデータを読み取る

Question

私は、プロジェクトフォルダで作成されたファイルからデータを読み取っている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コードです：誰もがここで

私のjQuery/Ajaxのコードがあるのを助けることができるしてください。

<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

は、私はあなたの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>'); 
     } 
     } 
    }); 
    }); 

}); 

だけFYI代わりにコピーの

Answer 2

あなたは、各caseブロックの最後にbreak;を必要としています。

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