CODEWITHSUNDEEP
jquerydrop-down-menu
Sorin Antohi
Sorin Antohi

Reputation: 6135

How to select options in Multiple select list with jQuery?

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

Upvotes: 33

Views: 103154

Answers (7)

Zeeshan
Zeeshan

Reputation: 231

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(",");

Upvotes: 0

Majid Ali Khan
Majid Ali Khan

Reputation: 741

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.

Upvotes: 2

Athul Nalupurakkal
Athul Nalupurakkal

Reputation: 440

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

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

Upvotes: 0

Dũng Trần Trung
Dũng Trần Trung

Reputation: 6276

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

Upvotes: 37

Aleksey
Aleksey

Reputation: 121

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

Upvotes: 4

SurferJoe
SurferJoe

Reputation: 985

You can pass a select with multiple values an array

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

Upvotes: 63

bdukes
bdukes

Reputation: 155935

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

Upvotes: 58

Related Questions