Set Selected Option Jquery Select2

This belong to codes prior khổng lồ select2 version 4

I have sầu a simple code of select2 that get data from ajax

$("#programid").select2(; }, results: function (data) ; } }, dropdownCssClass: "bigdrop", escapeMarkup: function (m) });

This code is working, however, I need to lớn phối a value on it as if in edit mode. When user select a value first time, it will be saved & when he needs to lớn edit that value it must appear in the same select menu (select2) lớn select the value previously selected but I can"t find a way.


The HTML code:

<đầu vào type="hidden" name="programid" id="programid" class="width-500 validate">

Select2 programmatic access does not work with this.

Bạn đang xem: Set selected option jquery select2

javascript php jquery ajax jquery-select2
Improve sầu this question
edited Mar 14 "17 at 14:02
22.3k 24 24 gold badges 92 92 silver badges 152 152 bronze badges
asked Aug 7 "14 at 16:45
1,705 2 2 gold badges 14 14 silver badges 22 22 bronze badges
You should be able lớn just phối the selected value in the html or use $("#programid").val() – Explosion Pills Aug 7 "14 at 16:52
ExplosionPills Negative sầu, I tried that too I got a blank value. How should I use programid.val()? I got the value from the hệ thống then I need to lớn mix it into lớn this hidden field of select2. – ClearBoth Aug 7 "14 at 17:01
ClearBoth Not sure if I get what you mean. Are you trying to phối the "selected" value of the Select2 component lớn one of the AJAX-retrieved results? – An Phan Aug 7 "14 at 17:36
AnPhan Yes, is there a way khổng lồ vày that? – ClearBoth Aug 9 "14 at 5:13
ClearBoth There is. Check my answer below. – An Phan Aug 9 "14 at 9:54
Add a bình luận  | 

29 Answers 29

Active Oldest Votes

To dynamically mix the "selected" value of a Select2 component:

$("#inputID").select2("data", );

Where the second parameter is an object with expected values.


This does work, just wanted khổng lồ note that in the new select2, "a_key" is "text" in a standard select2 object. so:


$("#all_contacts").select2("data", );

Thanks to lớn

Xem thêm: Ffsj Là Gì? Hướng Dẫn Cách Sử Dụng Phần Mềm Ffsj : Fastest File Splitter Joiner

Improve sầu this answer
edited Oct 18 "18 at 10:17
3,690 11 11 gold badges 30 30 silver badges 57 57 bronze badges
answered Aug 9 "14 at 9:53
An PhanAn Phan
2,387 1 1 gold badge 21 21 silver badges 27 27 bronze badges
I was trying with the id only select2('val', '1') but it wasn't work.. Thanks – ClearBoth Aug 9 "14 at 12:42
This does work, just wanted lớn note that in the new select2, "a_key" is "text" in a standard select2 object. so: – NoobishPro Nov 6 "15 at 1:42
same here on v4. Been pulling my hair out on this one. I don't think it's possible without going khổng lồ JavaScript solutions. Looking for another jQuery/Bootstrap Select2 dropdown now (2 days of fiddling every conceivable method - no joy!) – MC9000 Nov 5 "16 at 5:17
Select2 v4: $('#inputID').val(100).trigger('change') See… – Paul Jun 9 "17 at 20:57
NoobishPro & An Phan - Thanks for the Answer & Comment – Sinto lớn Oct 18 "18 at 10:18
 |  Show 4 more comments

Step #1: HTML

Step #2: Create an instance of Select2

$("#mySelect2").select2(; }, results: function(data, page) ; }, cache: true }, formatResult: function(element), formatSelection: function(element), escapeMarkup: function(m) });

Step #3: Set your desired value

$("#mySelect2").select2("data", );

If you use select2 without AJAX you can vị as follow:

/* "One" will be the selected option */ $("").val("0");

You can also do so:

$("#mySelect2").select2("val", "0"); SELECT2 V4

For select2 v4 you can appkết thúc directly an option/s as follow:

Or with JQuery:

var $newOption = $("").val("TheID").text("The text") $("#myMultipleSelect2").append($newOption).trigger("change");

other example