如何使用jQuery在多选列表中选择选项？

Question

我有两个下拉菜单.当用户从第二个中选择一个值(具有多个选择选项)时,使用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的选择丢失了).

Answer 1

您可以将具有多个值的选择传递给数组

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

Answer 2

您将无法使用该val方法将多个options 设置为已选中.相反,您应该选择选项本身,并设置其选定的属性:

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

Answer 3

例如,您有一个像这样的选择框:

<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>

选择多个选项(例如Eragon,Gadfly)的方法是创建一个包含要选择的选项值的对象,然后使用:

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