Jquery 如何在单击按钮时从选定列表框中删除多个选定值

我对JQuery非常陌生。我已经编写了一个代码，用于在选定列表框中添加和删除代码。在这里，从不同的选择列表框添加前三个值已经完成，但我无法删除我添加的这三个值。 HTML:

JQuery：

$(document).ready(function () {
    var one = $('.select-manage-category').val();
    var two = $('.select-manage-category1').val();
    var three = $('.select-manage-category2').val();
    $('#add-category').click(function () {
        $(
            '.select-manage-category, .select-manage-category1, .select-manage-category2'
        ).each(function () {
            // $('#selected-lst-values').append($(this).val());
            $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
        });
    });
    $('#remove-category').click(function () {
        $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function () {
            $('#selected-lst-values')
                .find('option[value="' + $(this).val() + '"')
                .remove();
        });
    });
});

$（文档）.ready（函数（）{
var one=$（'.select manage category'）.val（）；
var two=$（'.select-manage-category1'）.val（）；
var three=$（'.select-manage-category2'）.val（）；
$（“#添加类别”）。单击（函数（）{
$(
“.选择管理类别，.select-manage-category1，.select-manage-category2”
).每个（功能）{
//$（“#选定的lst值”）.append（$（this.val（））；
$（“#选定的lst值”）.append（“”+$（this.val（）+“”）；
});
});
$（“#删除类别”）。单击（函数（）{
$（'.选择管理类别、.select-manage-category1、.select-manage-category2'）。每个（函数（）{
$（“#选定的lst值”）
.find（'option[value=“”+$（this）.val（）+“”）
.remove（）；
});
});
});

你离目标太近了！如果你查看控制台日志，你会发现

.find（）

找不到目标，因为你错过了结束方括号

您所需要的只是：

.find('option[value="' + $(this).val() + '"]')

$（文档）.ready（函数（）{
var one=$（'.select manage category'）.val（）；
var two=$（'.select-manage-category1'）.val（）；
var three=$（'.select-manage-category2'）.val（）；
$（“#添加类别”）。单击（函数（）{
$(
“.选择管理类别，.select-manage-category1，.select-manage-category2”
).each（函数（{
//$（“#选定的lst值”）.append（$（this.val（））；
$（“#选定的lst值”）.append（“”+$（this.val（）+“”）；
});
});
$（“#删除类别”）。单击（函数（）{
$（'.选择管理类别、.select-manage-category1、.select-manage-category2'）。每个（函数（）{
$（“#选定的lst值”）
.find（'option[value=“”+$（this）.val（）+“]”）
.remove（）；
});
});
})；

。选择管理类别，
.选择-manage-category1，
.选择-manage-category2{
宽度：100px；
浮动：左；
保证金权利：4px；
}
p{
清除：左；
文本对齐：居中；
}
#选定的lst值{
宽度：100%；
}

1.
2.
1.
2.
1.
2.
您最多可以添加20个类别
保存

谢谢您的黑曜石时代。但是，它只允许我删除最后选择的值。例如，首先我选择三个值，然后再选择另外三个值。现在，选择列表框中将有6个值。因此，当我单击“删除类别”时按钮下一次单击时仅删除最后三个值，而不删除其他三个值。但是，我希望在下一次单击时删除这些值。我刚刚更新了答案以涵盖此内容。请参阅编辑：）

$(document).ready(function () {
    var one = $('.select-manage-category').val();
    var two = $('.select-manage-category1').val();
    var three = $('.select-manage-category2').val();
    $('#add-category').click(function () {
        $(
            '.select-manage-category, .select-manage-category1, .select-manage-category2'
        ).each(function () {
            // $('#selected-lst-values').append($(this).val());
            $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
        });
    });
    $('#remove-category').click(function () {
        $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function () {
            $('#selected-lst-values')
                .find('option[value="' + $(this).val() + '"')
                .remove();
        });
    });
});

.find('option[value="' + $(this).val() + '"]')