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

Answer 1

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