如何将多选框中的所有选项设置为已选择状态

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方法来实现每个选择框：

```javascript $('select').each(function() { $(this).find('option').prop('selected', true); }); ```

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

然而问题在于我需要为每个选择框编写一个方法。是否有更简单的方法，如编写一个jQuery方法来设置所有选项为已选择？

- Neriyan

---

所有选项都被选择了？这不是与选择列表的用途相反吗？无论如何 - 如果您为每个“select”添加一个“class”，您只需执行$（“.myList”）.each（function（）{ // etc }）;。 - SpaceBison

您已经完成了翻译。 - Cris

@SpaceBison 用户将看到一个人员对象列表，从中选择团队领导、部门主管等。每个选择的人员对象都会进入相应的选择框中。因此，当点击保存时，我需要从每个选择框中检索人员对象。 - Neriyan

@Neriyan 好的 - 我明白了。我添加了一个答案，我认为它符合您的要求。 - SpaceBison

Answer 1

点击选择所有项的最简单方法如下所示： $（“select [multiple] option”）.prop（“selected”，“selected”）;

示例fiddle：http://jsfiddle.net/vYzUS/ 在fiddle中，我省略了按钮点击并将HTML转换为虚拟HTML。我还（武断地）添加了多个属性，以防您有任何其他不想被选中的 select 列表。更明智的做法可能是将要选择的那些包装在带有 id 的 div 中，因为它会使选择器更加聚焦。

我还使用了 .prop（）而不是 .attr（） - .prop（）是在jQuery 1.7 中引入的，专门用于检索/设置属性值。

- SpaceBison

---

谢谢！这个解决方案完美地满足了我的需求。 - Neriyan

Answer 2

你不需要为每个选择框编写一个函数，只需使用这段代码：

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 的复选框才会在单击时切换。

- AlecTMH

---

这将只选择最后一个列表中的所有选项。 - SpaceBison

哎呀，我错过了那个，谢谢你指出来，我会更新答案。 - AlecTMH

@AlecTMH 这个方法可以用，但是我表单上还有其他下拉框，它们也会被选中所有选项，这是不希望的。感谢您抽出时间来协助。 - Neriyan

在这种情况下，您可以为需要应用的所有选择器设置相同的类。我会更新答案以展示我的意思。 - AlecTMH

Answer 3

这样就可以了。因为jQuery会通过选择器隐式地使用循环。如果你想要将其显式为循环，那么可以使用你的方法（在我看来这是不必要的）。

你可以像这样做。

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

- Ravi Gadag

---

这将仅选择最后一个列表中的选项，而不是所有列表。 - SpaceBison

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", "");

- RegarBoy