从动态生成的下拉菜单中删除一个选项

Question

I have a button that generates a dynamic form that contains 3 dropdowns. The selected options from the first form and the new generated form should not be duplicates. Same goes for all the forms. What I want is to remove the option from the last dropdown to avoid duplication. For example if I select "option A" and "2nd option A" and "3rd option A" from the first form, and I select "option A" and "2nd option A" from the second form, the 3rd drop down from this 2nd form shouldn't have "3rd option A". So basically I want jQuery to delete option of the 3rd drop down from the newly generated form.

 var i = 1; $("#addForm").click(function() { i++; $("#myForm").append('<select id="dropdown1' + i + '"><option value="option A">option A</option><option value="option B">option B</option><option value="option C">option C</option></select><select id="dropdown2' + i + '"><option value="2nd option A">2nd option A</option><option value="2nd option B">2nd option B</option><option value="2nd option C">2nd option C</option></select><select id="dropdown3' + i + '">option value="3rd option A">3rd option A</option><option value="3rd option B">3rd option B</option><option value="3rd option C">3rd option C</option></select>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post"> <div id="myForm"> <select id="dropdown11"> <option value="option A">option A</option> <option value="option B">option B</option> <option value="option C">option C</option> </select> <select id="dropdown21"> <option value="2nd option A">2nd option A</option> <option value="2nd option B">2nd option B</option> <option value="2nd option C">2nd option C</option> </select> <select id="dropdown31"> <option value="3rd option A">3rd option A</option> <option value="3rd option B">3rd option B</option> <option value="3rd option C">3rd option C</option> </select> </div> <button type="button" id="addForm">ADD</button> <button type="submit">SUBMIT</button> </form>

Answer 1

You can achieve this using the element data-child/group as identifiers. Ill show you an example of what you requested. It will only show values based on the selected value in one of the select-boxes.

You will also need to edit your #addform function to make my example work with your dynamically added input fields.

 var i = 1; $("#addForm").click(function() { i++; $("#myForm").append('<select id="dropdown1' + i + '"><option value="option A">option A</option><option value="option B">option B</option><option value="option C">option C</option></select><select id="dropdown2' + i + '"><option value="2nd option A">2nd option A</option><option value="2nd option B">2nd option B</option><option value="2nd option C">2nd option C</option></select><select id="dropdown3' + i + '">option value="3rd option A">3rd option A</option><option value="3rd option B">3rd option B</option><option value="3rd option C">3rd option C</option></select>'); }); $("[data-child]").change(function() { const selectedGroup = $(this).val(); var $childSelect = $("#" + $(this).attr("data-child")); value = $childSelect.find("option").hide().filter(function(i, e) { return $(e).val().startsWith(selectedGroup) }).show().eq(0).val(); $childSelect.val(value); $childSelect.trigger("change"); }); $("[data-child]").eq(0).trigger("change");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post"> <div id="myForm"> <select data-child="dropdown11"> <option value="A">option A</option> <option value="B">option B</option> <option value="C">option C</option> </select> <select id="dropdown11" data-child="dropdown21"> <option data-group="A" value="AA">2nd option A</option> <option data-group="B" value="BB">2nd option B</option> <option data-group="C" value="CC">2nd option C</option> </select> <select id="dropdown21" data-child="dropdown31"> <option data-group="AA" value="AAA">3rd option A</option> <option data-group="BB" value="BBB">3rd option B</option> <option data-group="CC" value="CCC">3rd option C</option> </select> </div> <button type="button" id="addForm">ADD</button> <button type="submit">SUBMIT</button> </form>

Advanced option menu (Hide/show based on selection)

https://codepen.io/crezzur/pen/NWxVqYO