Question

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

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

所以我的计划是要有一个下拉菜单，您可以从中选择一个，如果您想再添加一个项目，请单击一个按钮并获得一个新的下拉菜单，以便您选择一个新项目，但此新下拉菜单不应包含第一个下拉菜单中的项目。

我曾尝试构建类似这样的东西

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

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

但是，即使我的用户改变了主意，即使选择了其他选项，该选项现在也消失了（我知道这是javascript中的Remove部分，但是我不确定如何还原以前的选项）

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

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

Answer 1

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

例如

let options = [1, 2, 3, 4] // this is an array of options with ids let valuesSelected = []; // once you choose a value from the dropdown you need to push it to valuesSelectedArray

每次在下拉菜单中选择内容时，都需要从选项数组

中过滤出该值

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

这将为您提供选项数组，其中没有您已经选择的值。

动态更改下拉菜单

1 个答案: