Jquery 如何将所有选项设置为“从多个选择框中选择”

我有一个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>

---

但是问题是，我必须为4个选择框中的每一个编写一个方法。是否有一种更简单的方法来实现这一点，即编写一个jQuery方法来将所有选项设置为selected？

您不需要为每个选择框编写函数，只需编写以下代码：

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>

团队领导

HODs

董事

成员

---

因此，只有“选择”类为myClass的框才会打开，单击即可。因为jQuery将通过选择器隐式使用循环。如果您想使其显式为循环，那么使用您的方法（IMO，这是不必要的）

你可以这样做

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

---

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

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

$（“选择[多个]选项”）.prop（“选定”、“选定”）

小提琴示例：

在小提琴中，我省略了按钮点击，并将HTML转换为虚拟HTML。我还（任意）添加了multiple属性，以防您有任何其他
select
列表不希望被选中。可能更可取的做法是将您确实想要选择的内容用
id
包装在
div
中，因为这样可以使选择器更清晰

我还使用了
.prop（）
而不是
.attr（）
-
.prop（）
是在jQuery1.7中引入的，专门用于检索/设置属性值
 您可以通过以下方式选择它们：

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

或

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

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

或

或

是否选择了所有选项？这不正是选择列表的目的吗？无论如何-如果向每个
选择
，添加
类
，只需执行
$（“.myList”）.each（function（）{//etc}）您已经完成了。@SpaceBison用户将看到一个Person对象列表，用户可以从中选择谁是团队领导、HOD等。选择的每个Person对象都会进入相关的选择框。因此，当单击“保存”时，我需要从每个选择框中检索person对象。@Neriyan Ok-我明白了。添加了一个我认为符合您要求的答案。这将只选择最后一个列表中的所有选项。哎呀，我错过了，谢谢您指出，我将更新answer@AlecTMH这是可行的，但是我的表单上有其他选择框，这些框也会选择所有选项，这是不可取的。感谢您花时间提供帮助。在这种情况下，您可以为所有需要应用的选择设置相同的类。我将更新答案以显示我的意思。这将仅选择上一个列表中的选项，而不是所有列表中的选项。谢谢！这个解决方案完全符合我的要求。
 $("select option").prop("selected", false);

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

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