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

Question

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.

you need all the selected value in a text box or in a text area where the user can edit right — Varun Sridharan, Oct 18 '12 at 14:12
its like that , but i am using dropdown not textbox, actually Select2 convert into as like textbox — Kaps Hasija, Oct 18 '12 at 14:58
@S Varun ... see this link http://ivaynberg.github.com/select2/ — Kaps Hasija, Oct 19 '12 at 02:05
http://jsfiddle.net/NdQbw/2/ see this link i need to set that value on my dropdwon — Kaps Hasija, Oct 19 '12 at 15:19
you need initializer the select2 with all items? http://jsfiddle.net/jRSsn/ — jd_7, Oct 19 '12 at 17:29
@iJD yes its almost like that i need only selected item which are select by user on create mode ? — Kaps Hasija, Oct 20 '12 at 13:06
how the user select? it do **"select2"** .Or the user select out the **"select2"** from another code. i dont know what you mean — jd_7, Oct 20 '12 at 17:44
it means your list have 6 records and your has choose 3 records so i want display that 3 records as selected along with other remaining as unselected ...Now you can understand better — Kaps Hasija, Oct 21 '12 at 15:54
@KapsHasija Still require more explanation kapil sir........ — Ram, Oct 22 '12 at 07:57
@iJD see this link http://jsfiddle.net/NdQbw/4/ .. thsi is working fine but i need with Select2. this is simple multiselection. — Kaps Hasija, Oct 22 '12 at 09:36
@KapsHasija when you get the values always return a,c because you use the class selector and it get the first one found. [See_this] (http://jsfiddle.net/jRSsn/) — jd_7, Oct 22 '12 at 16:28
@IJD i have updated your code for acc. to my req. Any how Your code is really good, i appreciate you Thankuu Very Much.http://jsfiddle.net/jRSsn/1/ — Kaps Hasija, Oct 24 '12 at 02:40
select2 V4.0.3 To set multiple default selections: [this is the way](http://stackoverflow.com/a/37918749/219112) — Sadee, Jan 23 '17 at 16:09

jd_7 · Accepted Answer · 2012-10-24T23:29:22.437

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

actually thing is that we are getting value as a string not as a array so thats why i am using contain check to filter only selected value — Kaps Hasija, Oct 25 '12 at 03:06

Cesar Bielich · Answer 2 · 2021-04-14T20:51:34.463

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

Geert · Answer 3 · 2012-10-22T07:40:57.940

22

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/

edited Oct 22 '12 at 07:40

answered Oct 19 '12 at 10:09

Geert

1,217
8
20

yes We can get like this , But i am talking about Set Selected value on Edit Mode ,Note getting value from Create Mode – Kaps Hasija Oct 19 '12 at 15:13
Updated answer: $(".leaderMultiSelctdropdown").val(["a", "c"]); – Geert Oct 19 '12 at 19:26
Jaminon your code is fine but how we can fix that selected value as a,c it should be dynamically – Kaps Hasija Oct 22 '12 at 07:28
Updated the answer, you can use an array for that :) – Geert Oct 22 '12 at 07:41
http://forums.asp.net/t/1703902.aspx/1 check this link may be it will help you/........... – Ram Oct 22 '12 at 08:04
@Geert Jaminon your code is fine but it is working with normal multiple selection box i need with Jquery Select2 – Kaps Hasija Oct 22 '12 at 09:34
Perfect. Thanks for using an array to set the multi values. It was a light to my darkness. – curiousBoy Aug 16 '16 at 04:10

score 15 · Answer 4 · answered Jun 05 '17 at 05:45

15

Using select2 jquery library:

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

answered Jun 05 '17 at 05:45

Angie Alejo

743
9
15

score 7 · Answer 5 · edited Oct 27 '15 at 14:17

7

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

edited Oct 27 '15 at 14:17

Luís Cruz

14,780
16
68
100

answered Oct 27 '15 at 13:48

pankaj yadav

71
1
1

Thanks for your answer. However, it would be preferable if you could add a description as to why your code block solves the issue. This is a suggestion to improve this and future answers. Thanks! – Luís Cruz Oct 27 '15 at 14:18

score 7 · Answer 6 · answered Dec 19 '16 at 20:25

7

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

answered Dec 19 '16 at 20:25

Neelu

251
3
6

score 4 · Answer 7 · answered Oct 24 '12 at 10:11

4

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

answered Oct 24 '12 at 10:11

Ravichandran Jothi

3,028
11
52
82

I used this, after that I got only first value, not shows the remain values – Teresa Sep 24 '21 at 14:48
$('#area').select2().val(arrayArea).trigger('change'); – Teresa Sep 24 '21 at 16:03
I used to like this and I am using the select2 version4. I got the result. – Teresa Sep 24 '21 at 16:04

score 4 · Answer 8 · edited Aug 12 '15 at 14:48

4

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!

edited Aug 12 '15 at 14:48

SamTh3D3v

9,854
3
31
47

answered Aug 12 '15 at 14:36

Ravi Kiran

41
1

Omkar Bandkar · Answer 9 · 2018-09-10T06:26:35.473

2

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)

edited Sep 10 '18 at 06:26

answered Aug 26 '16 at 07:30

Omkar Bandkar

739
6
4

There are some syntax error in your code. For example "." sign after select2 - select2.("val",arrayOfValues)) – Faruque Ahamed Mollick Nov 16 '17 at 11:01

score 2 · Answer 10 · answered Sep 26 '16 at 17:42

2

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

answered Sep 26 '16 at 17:42

djack109

1,261
1
23
42

score 2 · Answer 11 · answered May 04 '20 at 11:32

2

Use multiselect function as below.

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

answered May 04 '20 at 11:32

Waruna Manjula

3,067
1
34
33

score 2 · Answer 12 · answered Aug 17 '20 at 18:18

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

score 0 · Answer 13 · answered Jan 19 '14 at 17:34

0

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

answered Jan 19 '14 at 17:34

azhar_SE_nextbridge

304
3
19

score 0 · Answer 14 · answered Sep 24 '21 at 16:05

0

$('#area').select2().val(arrayArea).trigger('change');

I used to like this and I am using the select2 version4. I got the result

answered Sep 24 '21 at 16:05

Teresa

127
2
8

score 0 · Answer 15 · answered Aug 29 '23 at 15:15

0

This worked for me:

$(".Books_Illustrations").val(["a", "c"]).trigger('change');

answered Aug 29 '23 at 15:15

jrreda

763
7
7

score -5 · Answer 16 · edited Jul 17 '14 at 15:53

-5

Use multiselect function as below.

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

edited Jul 17 '14 at 15:53

MKB

7,587
9
45
71

answered Oct 15 '12 at 05:29

Manas Srivastava

21
4

what about value shell i give a,c like that – Kaps Hasija Oct 15 '12 at 06:10

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

16 Answers16

Linked