How to Set Selected value in Multi-Value Select in Jquery-Select2.?
JqueryAjaxJquery Select2Jquery Problem Overview
I am binding my dropdown with Jquery-Select2
. It's working fine but now I need to bind my Multi-Value selectBox
by using Jquery-Select2
.
My DropDown
<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">Illustrations</option>
<option value="b">Maps</option>
<option value="c">Portraits</option>
</select>
</div>
From this link <http://ivaynberg.github.com/select2/> I am using Multiple Value Select Box, I can bind my dropdown with
$("dropdownid").Select2()
Its working fine, but now I need to get that selected value into my dropdown on edit mode So I am using this example:
$(".Books_Illustrations").select2("val", ["a", "c"]);
It's working but how can I fix my choice, because user can choose anything. So I can't write a,c statically that's why I need to bind my Selected value on Edit mode dynamically.
I think now you all are clear with my requirements. Please let me know if you need further clearance.
Jquery Solutions
Solution 1 - Jquery
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);
});
});
Solution 2 - Jquery
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');
Solution 3 - Jquery
So I take it you want 2 options default selected, and then get the value of it? If so:
<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);
Solution 4 - Jquery
Using select2 jquery library:
$('#selector').val(arrayOfValues).trigger('change')
Solution 5 - Jquery
var valoresArea=VALUES
// it has the multiple values to set separated by comma
var arrayArea = valoresArea.split(',');
$('#area').select2('val',arrayArea);
Solution 6 - Jquery
This is with reference to the original question
$('select').val(['a','c']);
$('select').trigger('change');
Solution 7 - Jquery
Just look at this one it will helps.
var valoresArea=VALUES // it has the multiple values to set, separated by comma
var arrayArea = valoresArea.split(',');
$('#area').val(arrayArea);
the URL is- link
Solution 8 - Jquery
you can add the selected values in an array
and set it as the value for default selection
eg:
var selectedItems =[];
selectedItems.push("your selected items");
..
$('#drp_Books_Ill_Illustrations').select2('val',selectedItems );
Try this, this should definitely work!
Solution 9 - Jquery
Using select2 library there are 2 ways to set the value
-
when single value is present you can pass it as string
$("#elementid").select2("val","valueTobeset")
-
when you are using select2 with multiselect option you can pass an array of the values to select2 and all those values will be set
var arrayOfValues = ["a","c"] $("#elementid").select2("val",arrayOfValues) remember that you can set single value on multiselect by passing an array also like this
var arrayOfValues = ["a"] $("#elementid").select2("val",arrayOfValues)
Solution 10 - Jquery
This doesn't work. only one value is ever pre-selected even though both options are available in the list only the first is shown
('#searchproject').select2('val', ['New Co-location','Expansion']);
Solution 11 - Jquery
Use multiselect function as below.
> $("#drp_Books_Ill_Illustrations").val(["val1", "val2"]).trigger("change");
Solution 12 - Jquery
To Select all
$('select[name=eventsFilter]').find('option').attr('selected', true);
$('select[name=eventsFilter]').select2();
To UnSellect all
$('select[name=eventsFilter]').find('option').attr('selected', false);
$('select[name=eventsFilter]').select2("");
Solution 13 - Jquery
no need to do so many things. for set value using multiple select2 var selectedvalue="1,2,3"; //if first 3 products are selected. $('#ddlProduct').val(selectedvalue);
Solution 14 - Jquery
$('#area').select2().val(arrayArea).trigger('change');
I used to like this and I am using the select2 version4. I got the result
Solution 15 - Jquery
Use multiselect function as below.
$('#drp_Books_Ill_Illustrations').multiSelect('select', 'value');