0

私はテーブルを持っています。各セルの中には、非常に多くのドロップダウンリストがあります。列の数は異なる場合があります。また、ドロップダウンリストの内容は各行で同じです。私が欲しいのは、1つのドロップダウンリストから値を選択するとき、その値を同じ行の他のすべてのドロップダウンリストから削除する必要があることです。

これが私のテーブルです

<table>
    <tbody> 
        <tr class="row">
            <td>
                <select>
                    <option value="1">Option 1 of row 1</option>
                    <option value="2">Option 2 of row 1</option>
                    <option value="3">Option 3 of row 1</option>
                </select>               
            </td>

            <td>
                <select>
                    <option value="1">Option 1 of row 1</option>
                    <option value="2">Option 2 of row 1</option>
                    <option value="3">Option 3 of row 1</option>
                </select>               
            </td>

            .....
            .....
        <tr>
        <tr class="row">
            <td>
                <select>
                    <option value="a">Option a of row 2</option>
                    <option value="b">Option b of row 2</option>
                    <option value="c">Option c of row 2</option>
                </select>               
            </td>

            <td>
                <select>
                    <option value="a">Option a of row 2</option>
                    <option value="b">Option b of row 2</option>
                    <option value="c">Option c of row 2</option>
                </select>               
            </td>

            .....
            .....
        <tr>
    </tbody>   
</table>

したがって、「行1のオプション1」を選択すると、他のすべてのドロップダウンリストからそのオプションを削除する必要があります。jqueryを使用してこれを達成するにはどうすればよいですか？

編集：

また、ユーザーがすでに選択されているドロップダウンから別の値を2回選択した場合は、以前に置き換えられたオプションを復元する必要があります

編集2：

jquery idセレクターを使用して、行に対してこれを行う方法を理解しました。クラスセレクターを使用して、すべての行を反復処理するにはどうすればよいですか？以下は単一行コードです

$('#row_id td select').change(function(){

    var values = [];
    $('#row_id td select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

    $('#row_id td select option').each(function(){   
        if($.inArray(this.value, values) > -1 && !this.selected)                
            $(this).attr("disabled","disabled");
        else
            $(this).removeAttr("disabled");
    });

});
 $('#row_id td select').change();//triggers initial change
4

4 に答える 4

3

どうぞ：

$('select').change(function() {
     $(this).closest('tr').find('select').not(this).find('option[value="'+ $(this).val() + '"]').remove();
});​

実例：http：//jsfiddle.net/lucuma/7Mxzj/

value属性に基づいて、選択したオプションを他の行から削除します。すべてのオプションを選択して削除し続けることが可能であると考えると、これがどれほど機能的であるかはわかりませんが、それはあなたの質問に答えます。

変更された質問ごとに更新された回答

更新される質問ごとに更新：選択したアイテムに基づいてオプションが表示および非表示になります。 http://jsfiddle.net/lucuma/7Mxzj/2/ 

$('select').change(function() {
     $(this).closest('tr').find('select').find("option").show();
     $(this).closest('tr').find('select').not(this).find('option[value="'+ $(this).val() + '"]').hide();
});​
于 2012-05-29T16:17:04.667 に答える
1

答えを得た。どうぞ

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

    var values = [];
    $(this).closest('tr').find('select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

    $(this).closest('tr').find('select').find('option').each(function(){   
        if($.inArray(this.value, values) > -1 && !this.selected)                
            $(this).attr("disabled","disabled");
        else
            $(this).removeAttr("disabled");
    });

});
 $('.row select').change();
于 2012-05-30T09:48:10.263 に答える
0

あなたがやりたいことのほとんどは、以前この質問でカバーされていました：選択ボックスからのアイテムの削除

あなたの場合、テーブルの単一行内の選択ボックスからオプションを削除したいとします。これらの選択に一致するjQueryセレクターを作成するには、選択ボックスを表すjQueryオブジェクトを取得し、parent()メソッドの呼び出し結果に基づいてメソッドを呼び出す必要がありますparent()。parent()selectでメソッドを呼び出した結果はテーブルセルでありparent()、テーブルセルでメソッドを呼び出した結果はテーブル行です。

この猫の皮を剥ぐ方法は複数ありますが、上記はあなたが始めるのに役立つはずです。

于 2012-05-29T16:14:07.510 に答える
0

動的なWebページの開発にどれだけ慣れているかに応じて、これを実現する方法はいくつかあります。$('#yourdropdownID')まず、またはを実行してドロップダウンリストを選択できるように、ドロップダウンリストごとに異なるIDを指定する必要がありますdocument.getElementById(...)。

<select>選択したオプションを取り込む関数を呼び出すonClickまたはonChange（「ルックアンドフィール」の方法に応じて）を使用する必要があります。例えば：<select onClick='removeOption(this);'>

多くのことを行うには、この関数をコーディングする必要があります。たとえば、引数として、すでに3つのリストがあるとします。1。3つのリストをループします。2.このループ内で、スイッチを使用して、受け取った値を他の2つの選択のオプションの値と比較します。3.これらの値を関数から受け取った値と比較し、このオプションを選択から削除します。4. JQueryが要素を正しく表示するように、現在の選択ドロップダウンリストを更新します。

すべてがスムーズに実行されることを確認するために、数回テストする必要がある場合があります。JQueryは少し風変わりな場合があるため、これらすべてを実行するときに必ずデバッグしてください。

于 2012-05-29T16:18:41.283 に答える