[jquery] How to Set Selected value in Multi-Value Select in Jquery-Select2.?

hi all i am binding my dropdown with Jquery-Select2. Its working fine but now i need to Bind my Multi-Value selectBox by using Jquery-Select2.

My DropDwon

    <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 Mutiple Value Select Box , I can Bind my dropdwon 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"]);

its working but how can i fix my choice, because user can choice anything So i can't write a,c statically thats why i need to bind my Selected value on Edit mode dynamically.

I think now you all are clear with my requirement. Please let me know if you need further clearance.

This question is related to jquery ajax jquery-select2

The answer is


var valoresArea=VALUES
// it has the multiple values to set separated by comma
var arrayArea = valoresArea.split(',');
$('#area').select2('val',arrayArea);

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


Use multiselect function as below.

$("#drp_Books_Ill_Illustrations").val(["val1", "val2"]).trigger("change");


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 library there are 2 ways to set the value 1. when single value is present you can pass it as string

$("#elementid").select2("val","valueTobeset")

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

Use multiselect function as below.

$('#drp_Books_Ill_Illustrations').multiSelect('select', 'value');

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


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


This is with reference to the original question
$('select').val(['a','c']);
$('select').trigger('change');

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

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

Using select2 jquery library:

$('#selector').val(arrayOfValues).trigger('change')

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!


Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to ajax

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios

Examples related to jquery-select2

How can I set the initial value of Select2 when using AJAX? Dynamically add item to jQuery Select2 control that uses AJAX How to set selected value of jquery select2? Styling of Select2 dropdown select boxes How to use placeholder as default value in select2 framework How can I disable selected attribute from select2() dropdown Jquery? Select2 open dropdown on focus How to use Select2 with JSON via Ajax request? Select2() is not a function jQuery select2 get value of select tag?