3

次のコードがあります。

<table>
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>

そして、ここで jsFiddle: http://jsfiddle.net/XNYU2/

これが可能かどうかを理解しようとしています。可能であれば、jQuery と Javascript のどちらが最善の解決策であり、どのようにそれを実現するかを理解しようとしています。

これはランキング システムであり、必要なことは単純です。ユーザーが任意のドロップダウンから任意の値を選択した場合、その値を他のドロップダウンから削除する必要があります。逆に、ユーザーがその値の選択を解除した場合は、すべてのドロップダウンに戻る必要があります。

4

3 に答える 3

1

はい、これは JavaScript のタスクです。jQuery は JavaScript に代わるものではありませんが、基本的にはブラウザー要素の操作を容易にするツールセットです。効果的に使用するには JavaScript の基本を理解する必要がありますが、使用することをお勧めします。

ここで重要なのは、問題を分解することです。1 つは、Select が変更された後にアクションを実行することです。これがどのように行われるかをここで見てください：http://api.jquery.com/change/

2番目のアクションは、実際に変更を実装することです。これについては、たとえばここで説明さ れています 選択ボックスから項目を削除する

于 2013-07-29T16:22:18.657 に答える
1

jsFiddleはここにあり、それがコードです。

var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];

$(document).ready(function () {

    $('#TheTable').find('select').change(function () {

        var TheSelectedValue = parseInt($(this).val(), 10);
        var TheSelectID = $(this).prop('id');
        var TheHTML = "";

        for (var i = 0; i < SelectOptions.length; i++) {

            if (SelectOptions[i] !== TheSelectedValue) {

                TheHTML = TheHTML + '<option value="';
                TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
                TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
            } 
        }

        $('#TheTable').find('select').each(function () {

            if ($(this).prop('id') !== TheSelectID) {

                $(this).html(TheHTML);           
            }
        });
    });
});

それを行う方法の 1 つにすぎません。数分でまとめました。改善できると確信していますが、それで開始できるはずです。

于 2013-07-29T16:44:36.793 に答える