触发动态和相关选择选项的更改

Question

我有两个选择选项独立cats 和依赖subcats。通过显示表格的详细信息行，我想从表格的当前行中获取选定的值。 它选择了cat 选项，但没有选择依赖于cat 的subcat。 我在我的真实代码中使用 ajax 来显示表格行详细信息并获取选择选项数据。

更新

现在它在演示中工作，将option value='" +value.category+ 中的category 替换为@msg 建议的value.subcategory。但是问题仍然存在，并且它仍然无法在我的真实代码中工作，因为我正在使用 ajax 并获取选择选项数据并触发 ajax 成功函数中的更改。 jsfiddle 中的 ajax 示例。

这是演示

var data = [
{"id":1,"category":"Mechanism","subcategory":"Allergic reaction"},
{"id":2,"category":"Mechanism","subcategory":"Bloodborne"},
{"id":3,"category":"Mechanism","subcategory":"Bugbite"},
{"id":4,"category":"Mechanism","subcategory":"Chemical"},
{"id":5,"category":"Mechanism","subcategory":"Electrical"},
{"id":6,"category":"Object","subcategory":"Sara lift"},
{"id":7,"category":"Object","subcategory":"Shower"},
{"id":8,"category":"Object","subcategory":"Table"},
{"id":9,"category":"Object","subcategory":"Wheelchair"}
];

$("#incimechtype").change(function(){
    var dropdown = $(this).val();
 		$("#incimech").find("option").remove();
     $.each(data, function(key, value){
      if(value.category == dropdown)
      	$('#incimech').append("<option value='" +value.subcategory+ "'  data-subcat='" +value.id+ "'>" +value.subcategory+ "</option>");
});
        changeOptions();
});

function changeOptions() {
  var selectedOption = $('#incimech').find('option:selected');
  $('#ids').val(selectedOption[0].dataset.subcat);
}

$(".show").click(function(){
	$(hide).show();
  var cat = $(this).closest('tr').find('.cats').text();
  var subcat = $(this).closest('tr').find('.subcats').text();
  $("#incimechtype").val(cat).trigger('change');
  $("#incimech").val(subcat);
});

#hide {
  display: none;
  padding: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="cats">Mechanism</td>
    <td class="subcats">Chemical</td>
    <td><button class="show"> show detail </button></td>
  </tr>
  <tr>
    <td class="cats">Object</td>
    <td class="subcats">Table</td>
    <td><button class="show"> show detail </button></td>
  </tr>
</table>


<div id="hide">
<label for="incimechtype">Mechanism Type</label>
<select name="incimechtype" id="incimechtype">
   <option value="Mechanism">Mechanism</option>
   <option value="Object">Object</option>
</select> 
<br>
<br>
<label for="incimech">Mechanism</label>
<select id="incimech" onChange="changeOptions()">
</select> 
<br>
<br>
<input type="number" id="ids">
</div>

Answer 1

最后，有了更接近你真实代码的东西，就有可能理解你的问题。

出现问题是因为机制选择是通过第二个 AJAX 调用填充的，该调用是从第一个 AJAX 调用的成功回调中触发的。但因为 AJAX 是异步，它不会立即完成，但不会阻止执行。在 AJAX 调用之后出现的任何代码都将在 AJAX 完成之前运行。

用伪代码解释，.show AJAX 成功回调如下所示：

success: function(response) {
    // 1. Set selected mechanism type
    // 2. AJAX call to populate mechanism dropdown
    // 3. Set selected mechanism option - Whoops!  2 has not
    // finished yet!  3 runs before 2 has finished!  Whatever 
    // changes you do to the mechanism options here will be
    // overwritten and lost when 2 updates them!
}

为避免这种情况，您必须移动必须在机制选项已重新填充到那个 AJAX 调用的成功回调中的任何必须运行的东西。

// .show AJAX
success: function(response) {
    // 1. Set selected mechanism type
    // 2. AJAX call to populate mechanism dropdown
}

// mechanism populate AJAX
success: function(response) {
    // 1. populate mechanism dropdown
    // 2. set selected mechanism
    // 3. copy selected id to input field.
}

Updated, working JSFiddle.

请注意，由于您提供了多次代码迭代，而我已依次更新了每一次，因此您的原始代码有很多更改。它们都在 JSFiddle 中进行了描述。