I have a dynamic form with AJAX chain select. The chain select is applied to 2 dropdown input lists. The first dropdown has a list of food categories. The second dropdown has a list of food items. Selecting options in the first dropdown will impact the options available in the second dropdown.

The AJAX chain select updates the HTML correctly when I look at the source code. However, when I try to use JavaScript to get the value of the selected option in the second dropdown before and after the HTML change, it remains the same.

Is there a way to get the value of the new selected option?

$('#table').on('change', '.category', function(){
  var $row = $(this).closest('tr');
  var categoryid = $row.find('.category option:selected').val()

  // display old selected food option
  alert($row.find('.food option:selected').val());

  $.get('./include/ajax.php?category=' + categoryid, function(data) {
    $row.find('.food').html(data);
  })
  
  // display new selected food option
  alert($row.find('.food option:selected').val());
});

The ajax.php simply takes the query string of the category and generates a list of HTML select options under that food category. For example, if the category is Drinks, then ajax.php will generate the following HTML page with a list of options for drinks. The first option having the selected attributed:

<option value="Beer" selected>Beer</option>
<option value="Coke">Coke</option>

So if I change the selected option in the first dropdown from the Fruits to Drinks, the options for the second dropdown will change from:

<select name="category[]" class="category">
    <option value="Fruits" selected>Fruits</option>
    <option value="Drinks">Drinks</option>
</select>

<select name="food[]" class="food">
    <option value="Apple" selected>Apple</option>
</select>

to this:

<select name="category[]" class="category">
    <option value="Fruits">Fruits</option>
    <option value="Drinks" selected>Drinks</option>
</select>

<select name="food[]" class="food">
    <option value="Beer" selected>Beer</option>
    <option value="Coke">Coke</option>
</select>