How to Set Selected value in Multi-Value Select in Jquery-Select2.?
Well actually your only need $.each to get all values, it will help you jsfiddle.net/NdQbw/5
<div class="divright">
<select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
<option value=" ">No illustrations</option>
<option value="a" selected>Illustrations</option>
<option value="b">Maps</option>
<option value="c" selected>selectedPortraits</option>
</select>
</div>
<div class="divright">
<select id="drp_Books_Ill_Illustrations1" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
<option value=" ">No illustrations</option>
<option value="a">Illustrations</option>
<option value="b">Maps</option>
<option value="c">selectedPortraits</option>
</select>
</div>
<button class="getValue">Get Value</button>
<button class="setValue"> Set value </button>
<div class="divright">
<select id="drp_Books_Ill_Illustrations2" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
<option value=" ">No illustrations</option>
<option value="a" selected>Illustrations</option>
<option value="b">Maps</option>
<option value="c" selected>selectedPortraits</option>
</select>
</div>
<div class="divright">
<select id="drp_Books_Ill_Illustrations3" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
<option value=" ">No illustrations</option>
<option value="a">Illustrations</option>
<option value="b">Maps</option>
<option value="c">selectedPortraits</option>
</select>
</div>
<button class="getValue1">Get Value</button>
<button class="setValue1"> Set value </button>
The script:
var selectedValues = new Array();
selectedValues[0] = "a";
selectedValues[1] = "c";
$(".getValue").click(function() {
alert($(".leaderMultiSelctdropdown").val());
});
$(".setValue").click(function() {
$(".Books_Illustrations").val(selectedValues);
});
$('#drp_Books_Ill_Illustrations2, #drp_Books_Ill_Illustrations3').select2();
$(".getValue1").click(function() {
alert($(".leaderMultiSelctdropdown").val());
});
$(".setValue1").click(function() {
//You need a id for set values
$.each($(".Books_Illustrations"), function(){
$(this).select2('val', selectedValues);
});
});
I get this post is old but there have been changes to how select2 works now and the answer to this question is extremely simple.
To set the values in a multi select2 is as follows
$('#Books_Illustrations').val([1,2,3]).change();
There is no need to specify .select2
in jquery anymore, simply .val
Also there will be times you will not want to fire the change
event because you might have some other code that will execute which is what will happen if you use the method above so to get around that you can change the value without firing the change
event like so
$('#Books_Illustrations').select2([1,2,3], null, false);
If that does not work you can also do this to not trigger the change event
$('#Books_Illustrations').select2();
$('#Books_Illustrations').val('some_value');
So I take it you want 2 options default selected, and then get the value of it? If so:
http://jsfiddle.net/NdQbw/1/
<div class="divright">
<select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
<option value=" ">No illustrations</option>
<option value="a" selected>Illustrations</option>
<option value="b">Maps</option>
<option value="c" selected>selectedPortraits</option>
</select>
</div>
And to get value:
alert($(".leaderMultiSelctdropdown").val());
To set the value:
$(".leaderMultiSelctdropdown").val(["a", "c"]);
You can also use an array to set the values:
var selectedValues = new Array();
selectedValues[0] = "a";
selectedValues[1] = "c";
$(".Books_Illustrations").val(selectedValues);
http://jsfiddle.net/NdQbw/4/
Using select2 jquery library:
$('#selector').val(arrayOfValues).trigger('change')