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方法将多个option设置为已选中。相反，您应该选择选项本身，并设置其选定的属性：

$('#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);

Answer 4

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

Answer 5

以下是查找和选择多选下拉列表的简单方法

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

Answer 6

您必须删除当前选项才能操作所选选项。

以下是如何附加选项的示例：

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

对于selected.js添加：

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

Answer 7

您需要执行以下操作以在multiselect中选择值。由于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，则执行; $（＆＃39;＃sonyConsoles＆＃39）。VAL（[1,2,4]）;

这将返回选择了选项1,2和5的selectBox。

Answer 8

最简单和更新的jQuery方法是使用map函数

    var abc = $("select option:selected").map(function() {
                    return this.value;
                }).get().join(",");

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

8 个答案: