Question

我有一个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方法来设置所有选项？

Answer 1

在点击时选择每个项目的最简单方法如下：

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

示例小提琴：http://jsfiddle.net/vYzUS/

在小提琴中，我省略了按钮单击并将HTML转换为虚拟HTML。我也（任意）添加了多重属性，如果你有不想要被选中的任何其他select列表。可能更适合用div来id包裹您想要选择的.prop()，因为它会让选择器更有针对性。

我还使用.attr()代替.prop() - {{1}}在jQuery 1.7 中引入，专门用于检索/设置属性值。

Answer 2

您无需为每个选择框编写函数，只需使用以下代码：

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

HTML with classes

<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的框才会打开。

Answer 3

这样就可以了。因为jQuery将通过选择器隐式使用循环。如果你想将它显式化为循环，那么使用你的方法（IMO不是必需的）。

你可以这样做。

$("#teamPersons option").attr("selected", "selected");

Answer 4

您可以通过以下方式选择所有内容：

$("select option").prop("selected", "selected");

或

$("select option").attr("selected", "selected");

您可以通过以下方式删除所有选定的选项：

 $("select option").prop("selected", false);

或

$("select option").attr("selected", false);

或

$("select option").attr("selected", "");

如何设置从多个选择框中选择的所有选项

4 个答案: