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列表。将您确实要选择的那些包裹在 a 中可能更可取，因为它会使选择器有更好的焦点。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 回答
0

您可以通过以下方式全部选择它们：

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

或者

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

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

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

或者

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

或者

$("select option").attr("selected", "");
于 2015-08-31T18:18:52.480 回答