Связывание событий с использованием jQuery

Question

Я пытаюсь отобразить параметры города на основе выбранного состояния, где состояния динамически загружаются в соответствии с выбранной страной (список стран статичен). но проблема в моей странице действий, которая получает данные от ajax, не получает никакого значения для состояния. Это моя первая попытка привязки события, поэтому, пожалуйста, помогите.

$(document).ready(function() { 
 
    $('#country').change(function() { 
 
    var value = $(this).val(); 
 
    $.ajax({ 
 
     url: "state_selector_db.php", 
 
     method: "post", 
 
     data: { 
 
     "country": value 
 
     }, 
 
     success: function(result) { 
 
     var obj = jQuery.parseJSON(result) 
 
     $('div#state').html(obj.state); 
 
     } 
 
    }); 
 
    }); 
 
    $('body').on("change", function() { 
 
    var value2 = $(this).val(); 
 
    $.ajax({ 
 
     url: "state_selector_db.php", 
 
     method: "post", 
 
     data: { 
 
     "state": value2 
 
     }, 
 
     success: function(res) { 
 
     var obj2 = jQuery.parseJSON(res) 
 
     $('div#city').html(obj2.city); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><b>Country:&nbsp</b> 
 
</p> 
 
<select id="country"> 
 
    <option value="na">Select</option> 
 
    <option value="india">India</option> 
 
    <option value="usa">USA</option> 
 
    <option value="england">England</option> 
 
</select> 
 
<div id="state"></div> 
 
<div id="city"></div>

Answer 1

Вы на правильном пути, но вам нужно немного изменить в случае связывания

связать события, чтобы выбрать который вы заполнили после использования ajax. событие изменения имеет значение.

$(document).ready(function() { 
    $('body').on("change", "div#state select", function() { 
     var value2 = $(this).val(); 
     $.ajax({ 
      url: "state_selector_db.php", 
      method: "post", 
      data: { 
       "state": value2 
      }, 
      success: function (res) { 
       var obj2 = jQuery.parseJSON(res) 
       $('div#city').html(obj2.city); 
      } 
     }); 
    }); 
}); 

Answer 2

Рассмотрим следующее дополнение:

$('body').on("change", "#state", function() { 
         ^^^^^^^^