javascript - jQuery 从 DropDownList 中删除项目

Question

在我看来，我有一个使用 Select2 的下拉列表、一个空白的 ul 元素和一个隐藏的 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 元素将有 3 次 Option 1。但是，如果用户多次选择 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 元素中重复...

感谢任何帮助。

更新的 fiddle

这是我的问题所在的副本!

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();
});

关于身份证:

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()