4

ユーザーが複数のオプションを選択できる複数の選択ボックスが表示されるjspフォームがあります。

<td rowspan="4" colspan="1">Team Leaders<br />
    <form:select id="teamLeader" multiple="multiple" size="10" path="teamLeader"/>
</td>
<td rowspan="4" colspan="1">HODs<br />
    <form:select id="teamHod" multiple="multiple" size="10" path="teamHod"/>
</td>
<td rowspan="4" colspan="1">Directors<br />
    <form:select id="teamDir" multiple="multiple" size="10" path="teamDir"/>
</td>
<td rowspan="4" colspan="1">Members<br />
    <form:select id="teamPersons" multiple="multiple" size="10" path="teamPersons"/>
</td>

ユーザーが保存をクリックすると、すべての選択ボックスのすべてのオプションが選択済みに設定されます。次のように、各選択ボックスに小さな jQuery メソッドを使用することで、これを実現できます。

jQuery(document).ready(function () {
    jQuery('#saveButton').click(function () {
        jQuery('#teamPersons').each(function () {
            jQuery('#teamPersons option').attr("selected", "selected");
        });
    });
});

ただし、問題は、4 つの選択ボックスのそれぞれに対してメソッドを作成する必要があることです。これを行う簡単な方法はありますか。つまり、すべてのオプションを選択済みに設定する単一の jQuery メソッドを記述しますか?

4

4 に答える 4

6

クリック時にすべてのアイテムを選択する最も簡単な方法は次のとおりです。

$("select[multiple] option").prop("selected", "selected");

フィドルの例: http://jsfiddle.net/vYzUS/

フィドルでは、ボタンのクリックを省略し、HTML をダミーの HTML に変更しました。また、選択したくないselectリストが他にある場合に備えて、(任意に) multiple 属性を追加しました。選択したいものを でラップすることをお勧めします。これにより、セレクターのフォーカスが向上します。divid

.prop()-の代わりにも使用しました.attr()-.prop()は jQuery 1.7で導入され、特にプロパティ値の取得/設定用です。

于 2013-02-04T09:59:23.703 に答える
0

選択ボックスごとに関数を記述する必要はありません。次のコードだけです。

jQuery(document).ready(function() {
    jQuery('#saveButton').click(function() {
        jQuery('select.myClass option').attr("selected","selected");
    });
});

クラスを含む HTML

<td rowspan="4" colspan="1">Team Leaders<br />
    <form:select id="teamLeader" class="myClass" multiple="multiple" size="10" path="teamLeader"/>
</td>
<td rowspan="4" colspan="1">HODs<br />
    <form:select id="teamHod" class="myClass" multiple="multiple" size="10" path="teamHod"/>
</td>
<td rowspan="4" colspan="1">Directors<br />
    <form:select id="teamDir" class="myClass" multiple="multiple" size="10" path="teamDir"/>
</td>
<td rowspan="4" colspan="1">Members<br />
    <form:select id="teamPersons" class="myClass" multiple="multiple" size="10" path="teamPersons"/>
</td>

そのため、クラス myClass を持つ選択ボックスのみがクリックで切り替えられます。

于 2013-02-04T09:40:02.950 に答える
0

これでうまくいきます。jQueryはセレクターを介して暗黙的にループを使用するため。ループとして明示的にしたい場合は、メソッドを使用してください（IMOは必要ありません）。

このようにすることができます。

$("#teamPersons option").attr("selected", "selected");
于 2013-02-04T09:40:32.697 に答える