javascript - AJAX 链选择后下拉 SELECTED 值不正确

Question

我有一个带有 AJAX 链选择的动态表单。链选择应用于 2 个下拉输入列表。第一个下拉列表有食物类别列表。第二个下拉列表有一个食物列表。在第一个下拉列表中选择选项将影响第二个下拉列表中可用的选项。

当我查看源代码时，AJAX 链选择会正确更新 HTML。但是，当我尝试使用 JavaScript 在 HTML 更改前后的第二个下拉列表中获取所选选项的值时，它保持不变。

有没有办法获得新选择的选项的价值？

$('#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());
});

ajax.php只需获取类别的查询字符串并在该食品类别下生成 HTML 选择选项列表。例如，如果类别是Drinks，那么 ajax.php 将生成以下 HTML 页面，其中包含饮料选项列表。具有选定属性的第一个选项：

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

因此，如果我将第一个下拉列表中的选定选项从Fruits更改为Drinks，则第二个下拉列表的选项将从：

<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>

对此：

<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>

标签： javascripthtmljqueryajax