第3レベル選択最初と2番目のドロップダウンで値の変更が選択されたときにドロップダウンが変更されない

Question

最初の選択に基づいて値が変更される3つの選択フォームが作成されました。たとえば、その国の国と州を選択します。選択状態と都市が表示されます。しかし、私が実際に見つけた現実は、このコードをテストすると、国が変わったときに状態が変わったということです。しかし、都市は州が変わったときに何かを埋めることができません。しかし、私がstateにデフォルト値を設定してそれを最初に変更すると、都市が生成されます。しかし、私がこれを国から始めると、国家は都市が失敗するでしょう。以下はコードです：私は何が間違っているかはわかりません。

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("select.country_id").change(function(){ 
     var selectedCountry = $(".country_id option:selected").val(); 
     $.ajax({ 
      type: "POST", 
      url: "location_state_processor.php", 
      data: { country_id : selectedCountry } 
     }).done(function(data){ 
      $("#responsestate").html(data); 
     }); 
    }); 

    $("select.state_id").change(function(){ 
     var selectedState = $(".state_id option:selected").val(); 
     $.ajax({ 
      type: "POST", 
      url: "location_city_processor.php", 
      data: { state_id : selectedState } 
     }).done(function(data){ 
      $("#responsecity").html(data); 
     }); 
    }); 

}); 
</script> 

<div id="responsecountry"> 
<select name="country_id" class="country_id select" title="Select Country"><option value="0">Select Country</option><option value="1">Afghanistan</option><option value="2">Albania</option> 
<option value="3">Algeria</option> 
<option value="4">American Samoa</option> 
<option value="5">Andorra</option><option value="6">Angola</option> 
<option value="7">Anguilla</option> 
<option value="8">Antarctica</option> 
</select></div> 



<div id="responsestate"><select class="state_id select" name="state_id"> 
     <option value="0">--Select State--</option><option value="5303">Barisal</option><option value="1161">Chittagong</option><option value="1162">Dhaka</option><option value="1163">Khulna</option><option value="1164">Rajshahi</option><option value="5304">Sylhet</option></select></div> 




<div id="responsecity"><select class="city_id select" name="city_id"> 
<option value="0">--Select City--</option> 
<option value="19081">Ackley</option> 
<option value="19082">Ackworth</option> 
<option value="18035">Adair</option> 
<option value="19131">Adel</option> 
</select></div> 

Answer 1

コードの下に試してみてください。

<div id="responsestate"><select class="state_id select" name="state_id" onchange="fetchCities(this)"> 
    <option value="0">--Select State--</option> 
    <option value="5303">Barisal</option> 
    <option value="1161"> 
     Chittagong 
    </option> 
    <option value="1162">Dhaka</option> 
    <option value="1163">Khulna</option> 
    <option value="1164">Rajshahi</option> 
    <option value="5304">Sylhet</option> 
</select></div> 




function fetchCities(ele){ 
    state_id = $(ele).val(); 
    $.ajax({ 
      type: "POST", 
      url: "location_city_processor.php", 
      data: { state_id : selectedState }; 
      success: function(responseData, textStatus, jqXHR) { 
       results = responseData.results; 
       $("#responsecity").html(data); 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
       console.log(jqXHR, errorThrown); 
      } 
     }); 

} 

Answer 2

私は一度問題の似たようなものに直面しています。 私はangularjsを使っていましたが。 htmlで応答をバインドしているため、問題が発生しています。 コントローラにこの変更機能を書き、応答をいくつかの配列に格納する方がよいでしょう。 次に、htmlのオプション選択で配列を反復処理します。 同じように都市を取得するために従います。