0

24個のドロップダウンを使用しています。ポジションのドライバーを選択したい。しかし、最初の位置にドライバーを選択すると、他のドロップダウンから削除する必要があるため、ドライバーを 2 回使用することはできません。ドロップダウンは次のとおりです。

<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

たとえば、同じ値が選択されているすべてのドロップダウンを色分けするなど、別のアプローチがより賢明であると私はまだ信じています。または、別のドロップダウンで選択した場合は、最初のドロップダウンからオプションを選択解除します。そうすれば、ユーザーがやりたいことをするのを奪うことはありませんが、許可されていないことをしようとすると警告します。UX に適しています。もう少しこのようなもの。

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


    });
});​
于 2012-10-15T08:52:58.800 に答える