Question

在我看来，我有一个使用Select2的下拉列表，一个空白ul元素和一个隐藏的ListBox元素。 Listbox元素是提交给服务器的内容。

<div class="form-group">
    @Html.Label("Grade", new { @class = "control-label col-md-2" })
    <div class="col-md-5">
        @Html.DropDownList("IPGrade", null, "-- Select a Grade --", new { id = "Grade-DDL", @class = "form-control" })
    </div>
    <div class="col-md-3">
        <ul id="Grade-List" class="list-group"></ul>
    </div>
</div>

@Html.ListBoxFor(model => model.LstGrades, new List<SelectListItem>(), new { id = "Grades-ListBox", @class = "form-control" })

现在，当用户从下拉列表中选择一个选项时，该值将通过jQuery填充到ul元素和Listbox元素中。将元素添加到ul元素后，我还创建了一个btn，允许用户从ul和列表框中删除该项。这就是问题所在。

用户可以在下拉列表中选择相同的选项但是他们选择了很多次，所以如果他们从下拉列表中选择Option 1 3次..那么ul元素和Listbox元素将有Option 1 3次。但是，如果用户选择了Option 1一次，并且他们想要从ul中删除一个，那么他们仍然留下2就是我的问题所在。

当用户尝试删除ul元素中重复的选项时...当他们单击删除时...它将删除与正在重复的选项相同的所有选项。因此，在上面的示例中..如果用户尝试删除其中一个Option 1 ..那么它将删除所有3 Option 1。

这是我的jQuery。

将项目添加到UL和列表框

$("#Grade-DDL").on("select2:select",
    function(evt) {
        console.log(evt.params);
        $("#Grade-List").append("<li class='list-group-item' data-id='" +
            evt.params.data.id +
            "' >" +
            evt.params.data.text +
            " <input type='button' class='btn btn-default btn-xs remove-button' style='float: right; margin-top: -2%;' value='x' /></li>");
        $("#Grades-ListBox")
            .append("<option selected='true' value='" +
                evt.params.data.id +
                "'>" +
                evt.params.data.text +
                "</option>");
        $("#Grade-DDL").val("").change();
    });

从UL和列表框中删除项目

function removeGradeCapability() {
    $("#Grade-List").on("click",
        ".remove-button",
        function () {
            //alert($(this).parent().text());
            //alert($(this).parent().data("id"));
            var elementId = $(this).parent().data("id");

            $("#Grades-ListBox option[value='" + elementId + "']").remove(); // remove item from listbox
            $(this).parent().remove(); // remove item from ul element
        });
}

目标

仅删除用户正在选择的单个选项，即使在ul元素中重复该选项...

感谢任何帮助。

更新小提琴

这是我的问题究竟是什么的复制品！

My Fiddle

Answer 1

看起来您的选项具有相同的值，所以可以肯定的是，按值选择它们，您将全部删除它们，

您需要为您的选项添加一些唯一标识符，甚至更好 - 在创建时间内向元素添加处理程序。

这样的事情应该有效：

function(evt) {
  console.log(evt.params);
  $("#Grade-List").append(
    $("<li class='list-group-item' data-id='" + evt.params.data.id + "' >" + evt.params.data.text + " </li>")
        .append(
            $("<input type='button' class='btn btn-default btn-xs remove-button' style='float: right; margin-top: -2%;' value='x' />")
                .click(function(e){
                    $(e.target).closest('option').remove();
                })
        )
  );
  $("#Grades-ListBox")
    .append("<option selected='true' value='" +
        evt.params.data.id +
        "'>" +
        evt.params.data.text +
        "</option>");
  $("#Grade-DDL").val("").change();
});

关于ID：

var usedIDs = [];
// as a concept only
function generateId() { 
  let id = ('' + (new Date()).getTime() + (1000* Math.random())).replace('.', '');
  return usedIDs.indexOf(id) == -1 ? id : generateId();
}

然后在你的选择中：

let uid = generateId();
$("#Grade-List").append('<li ...tradada ... ' + 'data-uid="' + uid + '"... tradada ... </li>');
$("#Grades-ListBox").append("<option ...tradada ... ' + 'data-uid="' + uid + '"... tradada ... </option>');

最后删除 - 点击：

$('[data-uid="' + $(e.target).data('uid')+ '"]').remove()

jQuery从DropDownList中删除项目

1 个答案: