Question

我正在使用24个下拉列表。我想为一个位置选择一个驱动程序。但是当我为第一个位置选择一个驱动程序时，它应该从其他下拉列表中删除，所以我不能使用驱动程序两次。下拉列表是：

<select name="rijderQual1">
<option value="1">S. Vettel</option>
<option value="2">M. Webber</option>
<option value="3">J. Button</option>
<option value="4">L. Hamilton</option>
<option value="5">F. Alonso</option>
<option value="6">F. Massa</option>
<option value="7">M. Schumacher</option>
<option value="8">N. Rosberg</option>
<option value="9">K. Raikkonen</option>
<option value="10">R. Grosjean</option>
<option value="11">R. 11</option>
<option value="12">R. 12</option>
<option value="14">K. Kobayashi</option>
<option value="15">S. Perez</option>
<option value="16">R. 16</option>
<option value="17">R. 17</option>
<option value="18">P. Maldonado</option>
<option value="19">R. 19</option>
<option value="20">H. Kovalainen</option>
<option value="21">J. Trulli</option>
<option value="22">P. de</option>
<option value="23">R. 23</option>
<option value="24">T. Glock</option>
<option value="25">C. Pic</option>
</select>

rijderQual24的名称为rijderQual1。因此，当我在S Vettel中选择rijderQual1时，应该从其他23个下拉列表中删除它。

有办法做到这一点吗？我认为它应该用JS或jQuery完成？

Answer 1

每次更改某些选定值时，您都可以通过所有选项进行迭代，并隐藏在其他位置选择的选项：

$('select').change(function() {

    var selectedValues = $('select').map(function() { return this.value; }).get();

    $('option').show();

    $.each($('option'), function(i, item) {

        if($(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 )
        {
            $(this).hide();
        }
    });

});

DEMO

Answer 2

尝试通过数组填充下拉框，并在所选的每个项目上删除该数组中的该项目。 JS和JQuery都可以工作。

Answer 3

我仍然相信另一种方法会更明智，例如对所有选择了相同值的下拉菜单进行颜色编码。如果您在另一个下拉列表中选择该选项，则从第一个下拉列表中取消选择该选项。这样你就不会剥夺用户做他们想做的事情，但是如果他们试图做一些不允许的事情就要警告他们。更适合用户体验。有点像这样的东西。

// Store text labels for options
$("option")
    .each(function() {
        $(this).data("label", $(this).text());
    });

$('select').change(function() {
    // Get selected values
    var  selectedValues = $('select').map(function() { return this.value; }).get();
    // Reset conflicting dropdowns
    currentVal = $(this).val();
    $(this).siblings("select")
        .each(function() { 
            if ($(this).val() == currentVal) $(this).val(0);
        });
    // Mark selected options as unavailable
    $("option")
        .each(function() {
            if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
                $(this).text("(" + $(this).data("label") + ")");
            else
                $(this).text($(this).data("label"));
        });

});

DEMO：http://jsfiddle.net/NAWNP/

但是，根据您的要求，这将迭代选项，禁用其他下拉列表中使用的选项。通过这种方式，您仍然可以看到您的选项，即使您无法制作它们。

$('select').change(function() {

    var selectedValues = []
    $("option:selected").each(function() { selectedValues.push($(this).val()) });
    $("option")
        .removeAttr("disabled")
        .each(function() {
            if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
            {
                $(this).attr("disabled", "true");
            }
        });

});

DEMO：http://jsfiddle.net/ntxmh/2/

Answer 4

工作演示 http://jsfiddle.net/zyGH7/

另一个 http://jsfiddle.net/fLTxj/

很简洁的版本。这是来源：jQuery remove options except current（写得很好）

希望它适合这个原因！ B-)

<强>代码

$('document').ready(function() {
    $(".hulk").change(function() {
        var val = this.options[this.selectedIndex].value;
        $('select').not(this).children('option').filter(function() {
            return this.value === val;
        }).remove();


    });
});

在下拉框中删除选项

4 个答案: