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.
With jQuery, you can use the . val() method to get an array of the selected values on a multi-select dropdown list.
To dynamically set the "selected" value of a Select2 component: $('#inputID'). select2('data', {id: 100, a_key: 'Lorem Ipsum'}); Where the second parameter is an object with expected values.
Method 1: Append the option tag to the select box The select box is selected with the jQuery selector and this option is added with the append() method. The append() method inserts the specified content as the last child of the jQuery collection. Hence the option is added to the select element.
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');
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); }); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With