如何在jQuery中選擇多個選擇列表中的選項？

我有兩個下拉菜單。當用戶從第一個我想要的第二個（它有多個選擇選項）中選擇一個值時，使用jQuery自動選擇一些值。我怎樣才能做到這一點？如何在jQuery中選擇多個選擇列表中的選項？

First select box: 
<select id="update_carte_s" name="update_carte_s"> 
    <option value="5!**8,9**!6!44.9">Ghid complet Internet</option> 
    <option value="6!**6,7**!6!24.95">PC pas cu pas</option> 
    <option value="7!**10**!3!27.95">Jocul ingerului</option> 
    <option value="8!**11,12**!8!39">Ghidul vinurilor</option> 
</select> 
Second select box: 
<select id="uc_autori_s" name="uc_autorilist[]" size="5" multiple> 
    <option value="3">Rose Tremain</option> 
    <option value="4">Jonathan Coe</option>   
    <option value="5">Cecilia Ahern</option> 
    <option value="6">Marinel Serban</option> 
    <option value="7">Emanuela Cherchez</option> 
    <option value="8">Peter Buckley</option> 
    <option value="9">Clark Duncan</option> 
    <option value="10">Carlos-Ruiz Zafon</option> 
    <option value="11">Catalin Paduraru</option> 
    <option value="12">Dan-Silviu Boerescu</option> 
</select>

從第一個選擇框中拆分的粗體值是我希望從第二個選擇框中選擇的值。例如11,12意味着在第二個框中選擇值11和12。

目前，我有這樣的事情：

$.bookAuthors = $.bookDetailsArray[1].split(','); 
$.each($.bookAuthors, function(intIndex, objValue){ 
     $("#uc_autori_s").val(objValue).attr("selected","selected"); 
});

但問題是，只有最後的值在我的情況下，選擇12（11選丟失）

來源

2010-01-12 Sorin Antohi

你不會能夠使用val方法將多個option設置爲選定狀態。相反，你應該選擇該選項本身，並設置其選擇的屬性：

$('#uc_autori_s option[value=' + objValue + ']').attr('selected', true);

來源

2010-01-12 14:46:27 bdukes

謝謝！它工作:) – 2010-01-12 15:06:03

從jQuery 1.6開始，你應該使用'prop'而不是'attr'來設置類似'selected'的布爾屬性 – bdukes 2014-02-10 16:34:51

完美的工作與https://harvesthq.github.io/chosen/謝謝 – ujjaval 2015-07-24 10:35:49

您可以通過一個選擇具有多個值的數組

$("#uc_autori_s").val($.bookAuthors);

來源

2014-02-11 18:49:33 SurferJoe

爲什麼這沒有受到任何關注？這適用於所有事情。 – rfoo 2015-01-20 16:35:38

同意。單行工作很棒，而且很直觀。 – mshiltonj 2015-03-25 18:53:15

例如，你有一個選擇框，這樣一個：

<select id="books"> 
    <option value="1">Harry Porter</option> 
    <option value="2">Eragon</option> 
    <option value="3">Gadfly</option> 
    <option value="4">C++ For Dummies</option> 
    <option value="5">Android Cookbook</option> 
</select>

選擇多個選項的方式（伊拉龍，牛虻爲例）是創建一個包含您要選擇的選項值的對象，然後使用此：

var options = ["2", "3"]; 
$("#books").val(options);

來源

2014-10-25 18:45:53 codingpuss

比接受的答案更好 – everydayapps 2015-09-24 06:32:59

<select id="multiple" multiple="multiple"> 
    <option selected="selected">Multiple</option> 
    <option>Multiple2</option> 
    <option selected="selected">Multiple3</option> 
</select> 

<script> 
$("#multiple").val(["Multiple2", "Multiple3"]); 
</script>

來源

2015-04-14 21:37:48 Aleksey

您必須刪除，以操縱所選擇的選項的當前選擇。

下面是一個例子，如何追加選項：

<select id="mySelectId"> 
    <option value=""></option> 
    <option value="Argentina">Argentina</option> 
    <option value="Germany">Germany</option> 
    <option value="Greece">Greece</option> 
    <option value="Japan">Japan</option> 
    <option value="Thailand">Thailand</option> 
</select> 

<script> 
    mySelect = $('#mySelectId'); 
    var selected = mySelect.val();       //get current values 
    selected = selected.concat(['Germany','Argentina']); //merge with new values 
    selected = Array.from(new Set(selected));    //make values unique 
    mySelect.val(null);         //delete current options 
    mySelect.val(selected);        //add new options 
</script>

對於chosen.js補充：

<script> 
    mySelect.trigger('chosen:updated'); 
</script>

來源

2016-10-18 22:11:02

這裏是找到並選擇多選擇下拉菜單的簡單方法

$('#selectID ').children("option[value=" + myValue + "]").prop("selected", true);

來源

2017-02-10 09:39:54

您需要執行以下操作以在多選中選擇值。由於multiselect在被選中時返回一個值的數組，所以當它的值被默認設置時，同樣需要給它。

<select id="sonyConsoles" multiple> 
<option value="1">PS4 Pro</option> 
<option value="2">PS4</option> 
<option value="3">PS3</option> 
<option value="4">PS Vita</option> 
<option value="5">PSP</option> 
</select>

如果你希望默認選擇1,2和4，那麼做; $（'＃sonyConsoles'）.val（[1,2,4]）;

這將返回選擇選項1,2和5的selectBox。

來源

2017-09-13 14:26:56

如何在jQuery中選擇多個選擇列表中的選項？

回答

相關問題