如何仅使用 jQuery 动态创建依赖选择/下拉列表

Question

我有一个动态创建的行的表，在每一行上我希望有 2 个相互依赖的下拉列表/选择。 我找到了 2 个小提琴，第一个是我想要的确切输出，但代码令人困惑并使用 json。 第二个代码最容易理解，但不是动态的。 有没有办法让它们一起工作？

// 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>');
}

所以我的问题是，由于它们不能都具有相同的 id，例如 fiddle 中的那些，我如何使每行上的一对选择依赖

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>