代码之家 › 专栏 › 技术社区 › Sorin Antohi

如何使用jquery在多个选择列表中选择选项?

drop-down-menu jquery

Sorin Antohi · 技术社区 · 15 年前

我有两个下拉列表。当用户从我在第二个中想要的第一个值中选择一个值(它有多选选项)时,使用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会丢失)。

8 回复 | 直到 5 年前

bdukes Jon Skeet 15 年前

你将无法使用 val 设置多个的方法 option S为选中状态。相反,您应该选择选项本身,并设置其选定属性:

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

SurferJoe 11 年前

可以通过数组传递带有多个值的select

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

Samuel Rondeau-Millaire Benjamin Autin 8 年前

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

<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、gadly)的方法是创建一个包含要选择的选项值的对象,然后使用此选项:

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

Aleksey 9 年前

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

Athul Nalupurakkal 8 年前

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

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

Tobi G. 8 年前

必须删除当前选项才能操作选定的选项。

下面是一个如何附加选项的示例:

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

Majid Ali Khan Andrew Clark 7 年前

您需要执行以下操作才能在多重选择中选择值。由于multisect在选中时返回一个值数组,因此在默认情况下设置其值时需要为其提供相同的值。

<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的选择框。

Zeeshan 6 年前

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

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