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元素时，我还创建了一个允许用户从ul和列表框中删除该项的btn。 问题就在这里。

用户可以在下拉列表中选择相同的选项，无论他们选择多少次，因此如果他们从下拉列表中选择Option 13 次，则ul元素和 Listbox 元素将Option 13 次。 但是，如果用户选择Option 1一次太多次，并且他们想从ul中删除一个，所以他们仍然只剩下 2 个，这就是我的问题所在。

当用户尝试删除在ul元素中重复的选项时，当他们单击"删除"时，它会删除与正在重复的选项相同的所有选项。 所以在上面的例子中..如果用户尝试删除其中一个Option 1..然后它将删除所有 3Option 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元素中重复...

任何帮助，不胜感激。

更新的小提琴

这是我的问题的复制品！

我的小提琴

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