0

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>
user3692048
  • 25
  • 4
  • Apologies for the clashing edits. Snippets should really be used for code that demonstrates something when you click "Run code snippet"; otherwise, you can just use normal code sections (the `{}` button). – Heretic Monkey Nov 09 '21 at 21:21
  • I have discovered that if I put the alert() inside the $.get function, then it works properly. – user3692048 Nov 10 '21 at 17:09
  • Well, yeah. The function passed to `$.get` is called after the URL is retrieved. Otherwise, you're basically trying to eat your pizza before it's delivered... – Heretic Monkey Nov 10 '21 at 17:15
  • Yes, thanks! Still new to javascript so lots of silly mistakes. – user3692048 Nov 11 '21 at 18:22

0 Answers0