Question

我有多个相同选项的下拉菜单。当用户选择第一个下拉列表项时，我的代码工作正常，然后删除第二个和第三个下拉列表中的项。类似地，这发生在第二个下拉列表中。但是当我第一次选择第二个下拉列表项时，会出现问题。如果我修改我的代码以包含下拉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;
});

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

Answer 1

我希望这种方法能给你一些想法：

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

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

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

这只是一个想法。您可以在此fiddle

中看到它正常工作

<强>更新

如果您希望始终反映更改，只需删除警卫并检查您是否未更新触发事件的元素（但行为有点奇怪）：

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

fiddle

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

1 个答案: