【问题标题】：Remove an option from dynamically-generated drop down menu从动态生成的下拉菜单中删除一个选项
【发布时间】：2020-07-23 08:51:33
【问题描述】：
我有一个按钮，可以生成一个包含 3 个下拉菜单的动态表单。从第一个表单和新生成的表单中选择的选项不应重复。所有表格也是如此。我想要的是从最后一个下拉列表中删除该选项以避免重复。例如，如果我从第一个表单中选择“选项 A”和“第二个选项 A”和“第三个选项 A”，并从第二个表单中选择“选项 A”和“第二个选项 A”，则从这里下拉第三个第二种形式不应该有“第三种选择A”。所以基本上我希望 jQuery 从新生成的表单中删除第三个下拉选项。
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>
【问题讨论】：
-
请edit您的问题包括您对该问题所做的研究，以及您基于该研究所做的尝试。
标签：
javascript
html
jquery
【解决方案1】：
您可以使用元素data-child/group 作为标识符来实现此目的。
我将向您展示您所要求的示例。它只会根据其中一个选择框中的选定值显示值。
您还需要编辑您的 #addform 函数，以使我的示例适用于您动态添加的输入字段。
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>
高级选项菜单（根据选择隐藏/显示）
https://codepen.io/crezzur/pen/NWxVqYO