从下拉列表中选择一个元素从其他下拉列表中删除JQuery

我有多个具有相同选项的下拉列表。当用户选择下拉列表的第一个项目，然后删除第二个和第三个下拉列表中的项目时，“我的代码”工作正常。类似地，第二个下拉列表也会出现这种情况。但是当我第一次选择第二个下拉列表的项目时，问题就出现了。如果修改代码以在下拉jquery onchange（）事件中包含所有删除组合，则第一个下拉列表将自动变为空白。我的代码是：

$('#skill1').on('change', function () {
    var n = $("#skill1 option:selected").text();
    var index = $('#skill1').get(0).selectedIndex;
    $('#skill2 option:eq(' + index + ')').remove();
    $('#skill3 option:eq(' + index + ')').remove();
});

$('#skill2').on('change', function () {
    var p = $("#skill2 option:selected").text();
    var index1 = $('#skill2').get(0).selectedIndex;
    $('#skill3 option:eq(' + index1 + ')').remove();
});

$('#skill3').on('change', function () {
    var r = $("#skill3 option:selected").text();
    var index2 = $('#skill3').get(0).selectedIndex;
});

---

请提供帮助，以便在下拉列表中选择任何项目时扩展代码。更改将反映在其他下拉列表中

我希望此方法可以为您提供一些想法：

1-为每个选择添加一个类，以便可以获得所有选择的数组

2-向包含类的元素添加更改事件：每当它们更改时，迭代数组并删除包含选定文本的选项。为了防止从触发事件的select或之前的select中删除选项（正如我认为的，这是您的意图），请设置一个防护（startRemoving），以防止从触发事件的select之前的select中删除任何内容

var $combo = $(".combo");
$combo.on("change", function () {
    var select = this,
        selected = $("option:selected", this).text(),
        startRemoving = false;

    $combo.each(function (_, el) {
        if (el === select) {
            startRemoving = true;
            return;
        }

        if (startRemoving) {
            $("option", el).each(function (_, el) {
                var $el = $(el);
                if ($el.text() === selected) {
                    $el.remove();
                }
            });
        }
    });
});

这只是一个想法。你可以看到它在这里工作

更新

如果您想让更改始终得到反映，只需移除防护，并检查您没有更新触发事件的元素（尽管行为有点奇怪）：

---

不知道这是否是您的选择，但您可能想考虑在这里使用，因为这似乎是一个最好的例子。在这里，您可以将所有选项定义为作用域内的数组，一旦发生更改，所有下拉列表都将自动更新

看一看

---

这就是范围。

因此，当您在任何下拉菜单中选择一个选项时，您希望从其他两个下拉菜单中删除相应的选项吗？是的，我希望从其他两个下拉菜单中删除相应的选项。那么，您是否缺少其他

on change

功能中的remove命令？您还在为

n

、

p

和

r

设置变量，但您似乎没有使用它们？它们是干什么用的？实际上我尝试过其他删除命令，但当我从第二个下拉列表中删除时，第一个下拉列表变为空。代码工作正常，但当我从第二个下拉列表中选择选项时，更改不会反映在第一个下拉列表中。同样，反向变化也不会发生，即当我们从第三个下拉菜单中选择一个选项时，变化不会反映在第一个或第二个菜单中dropdown@tendo嗨，我以为你想要那样。我已经用组合更新了这个问题，这些组合的更改会影响其他组合（触发事件的组合除外）。希望有帮助！谢谢，是的，它解决了问题。然后我将浏览AngularJS文档

var $combo = $(".combo");
$combo.on("change", function () {
    var select = this,
        selected = $("option:selected", this).text();

    $combo.each(function (_, el) {
        if (el !== select) {
            $("option", el).each(function (_, el) {
                var $el = $(el);
                if ($el.text() === selected) {
                    $el.remove();
                }
            });
        }
    });
});

function MyCtrl($scope) {
    $scope.options = ["option1","option2","option3","option4"]
}