0

我正在使用 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>

名称是rijderQual1rijderQual24。因此，当我选择S Vettel例如它时，rijderQual1它应该从其他 23 个下拉列表中删除。

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

4

4 回答 4

3

每次更改某些选定值时，您都可以遍历所有选项并隐藏在其他地方选择的选项：

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

});​

演示

于 2012-10-15T08:42:18.083 回答
2

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

于 2012-10-15T08:38:25.587 回答
1

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

// 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"));
        });

});​

演示：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");
            }
        });

});​

演示：http: //jsfiddle.net/ntxmh/2/

于 2012-10-15T09:08:58.043 回答
0

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

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

非常简洁的版本。这是来源：jQuery删除选项除了当前（写得很好）

希望它符合原因！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();


    });
});​
于 2012-10-15T08:52:58.800 回答