Изменение триггера на Dynami c и зависимый выбор

Question

У меня есть две опции выбора: независимая cats и зависимая subcats. показывая подробный ряд таблицы, я хочу получить выбранные значения из текущей строки таблицы. Он выбирает параметр cat, но не выбирает subcat, который зависит от cat. Я использую ajax в своем реальном коде, чтобы показать детали строки таблицы и получить данные выбора опций.

ОБНОВЛЕНИЕ

СЕЙЧАС это работает в демо-версии, заменив category в option value='" +value.category+ по value.subcategory, предложенному @msg. Но проблема все еще существует, и она все еще не работает в моем реальном коде, так как я использую ajax и получаю данные опций выбора и инициирую изменение в ajax функции успеха. Пример с ajax в этом jsfiddle .

Это демо

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 выглядит следующим образом:

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

Обновлен, работает JSFiddle .

Обратите внимание, что, поскольку вы предоставили несколько итераций кода, и я обновил каждую по очереди, в вашей оригинальный код Все они описаны в JSFiddle.