javascript - 下拉菜单动态变化

Question

我有一个无法解决的问题，所以我希望我能得到一些帮助和新知识来使用。

我正在构建一个表单，用户需要在其中预订一个项目，但一旦选择，我将无法再次选择它。

所以我的计划是有一个下拉菜单，您可以从中选择什么，如果您想要更多一项，您单击一个按钮并获得一个新的下拉菜单，允许您选择一个新项目，但这个新的下拉列表不应包含第一个下拉列表中的项目。

我曾尝试过构建这样的东西

$(function() {
    $('.dropdown').change(function() {
        dropdownvalue = $(this).val();
        $('.dropdown').not(this).find('option[value="' + dropdownvalue + '"]').remove();
    });
});

https://jsfiddle.net/loonitun/tya85x4j/2/

但是，如果我的用户改变主意，该选项现在就会消失，即使选择了其他内容(我知道这是 JavaScript 中的“删除”部分，但我不确定如何恢复以前的选项)

如果有人有解决方案，或者对我如何完成它有一些指导，我将非常感激。

我想到的另一个可能有效的解决方案是对数组进行 onchange 添加，但随后我需要另一个下拉列表来从该数组中删除项目，我认为这可能会让用户感到困惑。

Answer 1

您想要做的是 - 当您选择某些内容时过滤您的选项，而不是将它们从数组中删除。

例如

let options = [1, 2, 3, 4]//这是带有 id 的选项数组
让valuesSelected = [];//从下拉列表中选择一个值后，您需要将其推送到valuesSelectedArray

每次您在下拉列表中选择某些内容时，您都需要从选项数组中过滤掉该值

options.filter(option => !valuesSelected.includes(option))

这将为您提供一系列选项，但没有您已选择的值。