在克隆到新的动态生成的下拉列表后，删除先前选择中的选定项

本文关键字：选择 删除 下拉列表 动态 | 更新日期: 2023-09-27 18:03:48

我有一个asp.net下拉列表和一个asp.net按钮控件。每次单击按钮时，应该生成一个新的下拉列表，其中包含除了先前选择的值之外的所有值。

例如:如果我从值{a,b,c}的列表中选择'a'，然后单击按钮，我应该得到一个值{b,c}的新下拉列表。

虽然，我能够克隆下拉列表值，但我不知道如何通过删除选中的值来过滤值。

编辑

下面是场景
  • 我开始只有一个下拉列表(有5个选项)=> 1,2,3,4,5 ->第一个选项是默认选中的。
  • i选择选项5(在选择列表#2)
  • 我点击克隆->新列表(#3)添加只有选项2,3,4
  • i选择选项2(在选择列表#3)
  • 我点击克隆->新列表(#4)创建选项3,4
  • . .
下面是我的代码: 
<form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlCityName" runat="server" class="ddlClone" DataTextField="City" DataValueField="City" CssClass=""></asp:DropDownList>
        <asp:Button ID="btnClone" runat="server" Text="Clone" />
    </div>
    <div id="container">
    </div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnClone]").bind("click", function () {
            var index = $("#container select").length + 1;
            var ddl = $("[id$=ddlCityName]").clone();
            ddl.attr("id", "ddlCityName_" + index);
            ddl.attr("name", "ddlCityName_" + index);
            $("#container").append(ddl);
            $("#container").append("<br /><br />");
            return false;
        });
    });
</script>

在克隆到新的动态生成的下拉列表后，删除先前选择中的选定项

您可以获取选定的值，并在克隆后将其从新的select中删除，如下所示:

$(ddl).find("option[value='"+selVal+"']").remove();

下面是一个jsFiddle运行的例子:https://jsfiddle.net/ntvo173q/

我更新了jsFiddle以删除所有以前选择的项目，只是检查:

我所做的就是获取所有选中的值并从new select中移除:

var ddl = $('#sel').clone();
    $('select').each(function() {
        $(ddl).find("option[value='"+$(this).val()+"']").remove();
    });
https://jsfiddle.net/ntvo173q/1/

解决方案如下:

<script type="text/javascript">
$('#btnClone').click(function () {
    var original = $('select.ddlClone(0)');
    var allSelects = $('select.ddlClone');
    var clone = original.clone();
    $('option', clone).filter(function (i) {
        return allSelects.find('option:selected[value="' + $(this).val() + '"]').length;
    }).remove();
    $('#target').append(clone).append('<br /><br /><br />');
});

相关文章：