如何在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中选择多个选择列表中的选项？

回答

相关问题