如何設置所有選項，從多個選擇框

我在其中用戶呈現多個選擇框一個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方法來設置所有選項選擇？

來源

2013-02-04 Neriyan

所有選項被選中？這與選擇列表的目的不是相反的嗎？無論如何 - 如果你爲每個'select'添加一個'class'，你可以做'$（「。myList」）。each（function（）{// etc}）;' – SpaceBison

你已經完成了。 – Cris

@SpaceBison爲用戶提供一個Person對象列表，他們從中選擇誰是團隊領導者，HOD等。選擇的每個Person對象都會進入相關的選擇框。所以當單擊Save時，我需要從每個選擇框中檢索人物對象。 – Neriyan

選擇上點擊每一個項目最簡單的方法，將如下所示：

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

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

在小提琴，我省略按鈕點擊並將HTML變成虛擬HTML。我也（任意）添加了多個屬性，因此您有任何其他select列表，你做不是想被選中。它可能可能更可取，以iddiv包裝你想要選擇的那些，因爲它會給選擇器更好的焦點。

我也用.prop()代替.attr() - .prop() jQuery中1.7引入，是專門爲屬性值的檢索/設置。

來源

2013-02-04 09:59:23 SpaceBison

謝謝！這個解決方案完全符合我的要求。 – Neriyan

你並不需要編寫每個選擇框的功能，只是這個代碼：

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-04 09:40:02 AlecTMH

這隻會選擇最後一個列表中的所有選項。 – SpaceBison

哎呀，我錯過了，謝謝你指出，我會更新答案 – AlecTMH

@AlecTMH這可以工作，但我有我的表單上的其他選擇框，這些也選擇了所有的選項，這是不可取的。感謝您花時間提供協助。 – Neriyan

這將做到這一點。由於jQuery將通過選擇器隱式使用循環。如果你想把它看作循環，那麼就使用你的方法（不需要IMO）。

你可以這樣做。

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

來源

2013-02-04 09:40:32

這隻會選擇最後一個列表中的選項，而不是所有的列表。 – SpaceBison

您可以通過這種方式將其全部選中：

$("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-31 18:18:52 developer

如何設置所有選項，從多個選擇框

回答

相關問題