How to select options in Multiple select list with jQuery?

Question

I have two dropdowns. When a user selects a value from the first one I want in the second (which has the multiple select option), with jQuery, to select some values automatically. How can I do that?

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>

The bolded values from the first select box split by , are the values that I want to select from the second select box. For example 11,12 would mean in the second box options with values 11 and 12 to be selected.

Currently I have something like this:

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

but the problem is that only the last value is selected in my case 12 (selection of 11 is lost).

SurferJoe · Accepted Answer · 2014-02-11 18:49:33Z

63

You can pass a select with multiple values an array

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

answered Feb 11, 2014 at 18:49

SurferJoe

1,0051 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rfoo Over a year ago

Why hasn't this received any attention? This works perfectly for everything.

lisandro Over a year ago

This is the correct answer and the one marked as correct states that this does not work.

Brian Dukes · Accepted Answer · 2010-01-12 14:46:27Z

58

You're not going to be able to use the val method to set multiple options as selected. Instead, you should select the option itself, and set its selected attribute:

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

answered Jan 12, 2010 at 14:46

Brian Dukes

157k25 gold badges152 silver badges176 bronze badges

2 Comments

Brian Dukes Over a year ago

Starting in jQuery 1.6, you should use prop instead of attr to set boolean properties like selected

PachinSV Over a year ago

Yes you can use the val method. This should be unmarked as the correct answer.

Samuel Rondeau-Millaire · Accepted Answer · 2016-03-21 15:35:33Z

37

For example, you have a select box like this one:

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

The way to select multiple options (Eragon, Gadfly for example) is to create an object that contains values of options you want to select, then use this:

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

edited Mar 21, 2016 at 15:35

Samuel Rondeau-Millaire

1,1302 gold badges13 silver badges26 bronze badges

answered Oct 25, 2014 at 18:45

Dũng Trần Trung

6,2763 gold badges29 silver badges21 bronze badges

Comments

Aleksey · Accepted Answer · 2015-04-14 21:37:48Z

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>

answered Apr 14, 2015 at 21:37

Aleksey

1211 silver badge3 bronze badges

Comments

Majid Ali Khan · Accepted Answer · 2017-09-13 14:41:32Z

2

You need to do following to select values in multiselect. Since multiselect returns an array of values when selected, so the same needs to be given to it when its values are to be set by default.

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

If you wish options 1,2 and 4 to be selected by default then do; $('#sonyConsoles').val([1,2,4]);

This will return the selectBox which has option 1,2 and 5 selected.

edited Sep 13, 2017 at 14:41

answered Sep 13, 2017 at 14:26

Majid Ali Khan

7418 silver badges14 bronze badges

Comments

Athul Nalupurakkal · Accepted Answer · 2017-02-10 09:39:54Z

0

Here is the simple way to find and select multi select dropdown

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

answered Feb 10, 2017 at 9:39

Athul Nalupurakkal

4504 silver badges8 bronze badges

Comments

Zeeshan · Accepted Answer · 2018-05-17 04:19:47Z

0

The most simplest and updated way of jQuery is to use the map function

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

answered May 17, 2018 at 4:19

Zeeshan

2311 gold badge3 silver badges7 bronze badges

1 Comment

Sergio A. Over a year ago

If you have the option elements already selected, you can get the same result using $("select").val()

Collectives™ on Stack Overflow

How to select options in Multiple select list with jQuery?

7 Answers 7

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related