Как я могу сделать динамически создаваемые зависимые выборки / выпадающие, используя только jQuery

Question

У меня есть таблица с динамически создаваемыми строками, в каждой строке я хочу иметь 2 раскрывающихся списка / выбора, которые зависят друг от друга. Я нашел 2 скрипты, во-первых, это точный вывод, который я хочу, но код сбивает с толку и использует json. второй код проще всего понять, но он не динамический c. Есть ли способ заставить их работать вместе?

// http://jsfiddle.net/C2xsj/5/ <----- this is the output i want but the code is kinda confusing for me

// https://jsfiddle.net/fwv18zo1/ <--- this has the simpler code 

давайте предположим, что это моя таблица:

<INPUT type="button" value="Add Row" id="button"/>
<form id="myForm">
<TABLE id="addTable" >
<TR><TD>
<select id="selectCategory">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>
</TD>
<TD>
<select id="selectSubCategory" >
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>
</TD></TR>
</TABLE>
</form>

, когда кто-то нажимает кнопку добавления строки, он создает новую строку, используя что-то аналогично этому все параметры закодированы в этой функции, такие как ():

$('#button').click(function() {
var table = $('#addTable');

table.append('<tr><td data-label="Task"><select class="ui fluid search dropdown" required><option value="1">Fruit</option><option value="2">Animal</option><option value="3">Bird</option><option value="4">Car</option></select><select class="ui fluid search dropdown" required><option value="1">Banana</option><option value="1">Apple</option><option value="1">Orange</option><option value="2">Wolf</option><option value="2">Fox</option><option value="2">Bear</option><option value="3">Eagle</option><option value="3">Hawk</option><option value="4">BWM<option></select></tr>');
}

, поэтому моя проблема в том, что, поскольку все они не могут иметь одинаковый идентификатор, такой как в скрипте, как я могу сделать пара выборок в каждой строке зависит

Answer 1

Здесь я использовал clone функцию. Прочитайте комментарий на JS чтобы узнать больше.

$(document).on("change",".select1",function(){
 var thisParent = $(this).parents("tr"); // detect the parent of the select1.
  $(".select2",thisParent).find('option[value]').addClass('hidden'); // hide all option values.
  $(".select2",thisParent).find('option[value="' + this.value + '"]').removeClass('hidden'); // show only values that match the 'select1' value.
});

$(".addNew").click(function(){ // clone button
 $(".cloneThis").clone().appendTo("tbody"); // clone the class 'cloneThis' and append it into tbody.
 $("tr:last").removeClass("cloneThis"); // remove 'cloneThis' class from the last appended child, so you can clone it again from the original one.
 $("button:last").removeClass("addNew").addClass("removeThis").html("Remove"); // replace 'Add' with 'Remove' and add class 'removeThis' to be able to remove this tr.
});

$(document).on("click",".removeThis",function(){ // remove function.
 $(this).parents("tr").remove(); // find this button parent and remove it.
});

table{
 width:100%;
}

select, button{
 width:30%;
}

.hidden{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
 <tbody>
  <tr class="cloneThis">
   <td>
   
   <select name="select1" class="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
   </select>

   <select name="select2" class="select2">
    <option>Select type first</option>
    <option value="1" class="hidden">Banana</option>
    <option value="1" class="hidden">Apple</option>
    <option value="1" class="hidden">Orange</option>
    <option value="2" class="hidden">Wolf</option>
    <option value="2" class="hidden">Fox</option>
    <option value="2" class="hidden">Bear</option>
    <option value="3" class="hidden">Eagle</option>
    <option value="3" class="hidden">Hawk</option>
    <option value="4" class="hidden">BWM<option>
   </select>
   
   <button class="addNew">Add</button>
   
   </td>
  <tr>
 </tbody>
</table>