How to set selected value of jquery select2

Question

This belong to codes prior to select2 version 4

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

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

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

UPDATE:

The HTML code:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

Select2 programmatic access does not work with this.

User · Answer

Nice and easy   document getElementById  select2-id city-container   innerHTML    Your Text Here     And you change id city to your select s id   Edit  After Glen s comment I realize I should explain why and how it worked for me   I had made select2 working really nice for my form  The only thing I couldn t make work was to show the current selected value when editing  It was searching a third party API  saving new and editing old records  After a while I realized I didn t need to set the value correctly  only the label inside field  because if the user doesn t change the field  nothing happens  After searching and looking to a lot of people having trouble with it  I decided make it with pure Javascript  It worked and I posted to maybe help someone  I also suggest to set a timer for it

User · Answer

Also as I tried  when use ajax in select2  the programmatic control methods for set new values in select2 does not work for me  Now I write these code for resolve the problem       sel        empty     empty select      append     lt option  gt      add option tag in select          val  20     set value for option to post it          text  nabi      set a text for show in select      val  20     select option of select2      trigger  change      apply to select2   You can test complete sample code in here link  https   jsfiddle net NabiKAZ 2g1qq26v 32  In this sample code there is a ajax select2 and you can set new value with a button    x000D   x000D      btn   click function     x000D        sel   x000D       empty     empty select x000D       append     lt option  gt      add option tag in select x000D         val  20     set value for option to post it x000D         text  nabi      set a text for show in select x000D       val  20     select option of select2 x000D       trigger  change      apply to select2 x000D      x000D   x000D      sel   select2   x000D    ajax    x000D      url   https   api github com search repositories   x000D      dataType   json   x000D      delay  250  x000D      data  function params    x000D        return   x000D          q  params term     search term x000D          page  params page x000D           x000D         x000D      processResults  function data  params    x000D           parse the results into the format expected by Select2 x000D           since we are using custom formatting functions we do not need to x000D           alter the remote JSON data  except to indicate that infinite x000D           scrolling can be used x000D        params page   params page    1  x000D   x000D        return   x000D          results  data items  x000D          pagination    x000D            more   params page   30   lt  data total count x000D            x000D           x000D         x000D      cache  true x000D       x000D    escapeMarkup  function markup    x000D      return markup  x000D          let our custom formatter work x000D    minimumInputLength  1  x000D    templateResult  formatRepo     omitted for brevity  see the source of this page x000D    templateSelection  formatRepoSelection    omitted for brevity  see the source of this page x000D      x000D   x000D  function formatRepo repo    x000D    if  repo loading  return repo text  x000D   x000D    var markup     lt div class  select2-result-repository clearfix  gt     x000D        lt div class  select2-result-repository  avatar  gt  lt img src      repo owner avatar url        gt  lt  div gt     x000D        lt div class  select2-result-repository  meta  gt     x000D        lt div class  select2-result-repository  title  gt     repo full name     lt  div gt    x000D   x000D    if  repo description    x000D      markup      lt div class  select2-result-repository  description  gt     repo description     lt  div gt    x000D      x000D   x000D    markup      lt div class  select2-result-repository  statistics  gt     x000D        lt div class  select2-result-repository  forks  gt  lt i class  fa fa-flash  gt  lt  i gt      repo forks count     Forks lt  div gt     x000D        lt div class  select2-result-repository  stargazers  gt  lt i class  fa fa-star  gt  lt  i gt      repo stargazers count     Stars lt  div gt     x000D        lt div class  select2-result-repository  watchers  gt  lt i class  fa fa-eye  gt  lt  i gt      repo watchers count     Watchers lt  div gt     x000D        lt  div gt     x000D        lt  div gt  lt  div gt    x000D   x000D    return markup  x000D    x000D   x000D  function formatRepoSelection repo    x000D    return repo full name    repo text  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs select2 4 0 2-rc 1 css select2 min css  gt  x000D   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs select2 4 0 2-rc 1 js select2 min js  gt  lt  script gt  x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link rel  stylesheet  type  text css  href  https   select2 org assets a7be624d756ba99faa354e455aed250d css  gt  x000D   x000D   lt select id  sel  multiple  multiple  class  col-xs-5  gt  x000D   lt  select gt  x000D   x000D   lt button id  btn  gt Set Default lt  button gt  x000D   x000D   x000D

User · Answer

I did something like this to preset elements in select2 ajax dropdown          preset element values           id  val topics            topics is an array of format    id      text                        setTimeout function               ajaxTopicDropdown id                  2 location origin   api for gettings topics                     Pick a topic   true  5                                       1              ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

User · Answer

inputID   val  100   select2      It would be more appropriate to apply select2 after choosing one of the current select

User · Answer

Set the value and trigger the change event immediately       selectteam   val  183 182   trigger  change

User · Answer

I use select2 with ajax source with Laravel. In my case it simple work cycling option i receive from page and add Option to select2..

$filtri->stato = [1,2,...];

$('#stato') is my select2 with server side load

<script>
    @foreach ($filtri->stato as $item)
       $('#stato').append(new Option("{{\App\Models\stato::find($item)->nome}}",{{$item}}, false, true));
    @endforeach
</script>

In my case I can call text of option with find method, but it's possible do it with ajax call

User · Answer

select location id   val value           select location id   select2   trigger  change      I solved my problem with this simple code  Where  select location id is an ID of select box and value is value of an option listed in select2 box

User · Answer

In the current version on select2 -  v4 0 1 you can set the value like this    x000D   x000D  var  example       js-example-programmatic   select2    x000D      js-programmatic-set-val   on  click   function       example val  CA   trigger  change        x000D   x000D     Option 2 if you can t trigger the change event  x000D  var  exampleDestroy       js-example-programmatic-destroy   select2    x000D      js-programmatic-set-val   on  click   function       exampleDestroy val  CA   select2  destroy   select2        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 1 js select2 min js  gt  lt  script gt  x000D   lt link href    cdnjs cloudflare com ajax libs select2 4 0 1 css select2 min css  rel  stylesheet    gt  x000D   x000D  using  trigger change   x000D   lt select class  js-example-programmatic  gt  x000D     lt optgroup label  Alaskan Hawaiian Time Zone  gt  x000D       lt option value  AK  gt Alaska lt  option gt  x000D       lt option value  HI  gt Hawaii lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Pacific Time Zone  gt  x000D       lt option value  CA  gt California lt  option gt  x000D       lt option value  NV  gt Nevada lt  option gt  x000D       lt option value  OR  gt Oregon lt  option gt  x000D       lt option value  WA  gt Washington lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Mountain Time Zone  gt  x000D       lt option value  AZ  gt Arizona lt  option gt  x000D       lt option value  CO  gt Colorado lt  option gt  x000D       lt option value  ID  gt Idaho lt  option gt  x000D       lt option value  MT  gt Montana lt  option gt  x000D       lt option value  NE  gt Nebraska lt  option gt  x000D       lt option value  NM  gt New Mexico lt  option gt  x000D       lt option value  ND  gt North Dakota lt  option gt  x000D       lt option value  UT  gt Utah lt  option gt  x000D       lt option value  WY  gt Wyoming lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Central Time Zone  gt  x000D       lt option value  AL  gt Alabama lt  option gt  x000D       lt option value  AR  gt Arkansas lt  option gt  x000D       lt option value  IL  gt Illinois lt  option gt  x000D       lt option value  IA  gt Iowa lt  option gt  x000D       lt option value  KS  gt Kansas lt  option gt  x000D       lt option value  KY  gt Kentucky lt  option gt  x000D       lt option value  LA  gt Louisiana lt  option gt  x000D       lt option value  MN  gt Minnesota lt  option gt  x000D       lt option value  MS  gt Mississippi lt  option gt  x000D       lt option value  MO  gt Missouri lt  option gt  x000D       lt option value  OK  gt Oklahoma lt  option gt  x000D       lt option value  SD  gt South Dakota lt  option gt  x000D       lt option value  TX  gt Texas lt  option gt  x000D       lt option value  TN  gt Tennessee lt  option gt  x000D       lt option value  WI  gt Wisconsin lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Eastern Time Zone  gt  x000D       lt option value  CT  gt Connecticut lt  option gt  x000D       lt option value  DE  gt Delaware lt  option gt  x000D       lt option value  FL  gt Florida lt  option gt  x000D       lt option value  GA  gt Georgia lt  option gt  x000D       lt option value  IN  gt Indiana lt  option gt  x000D       lt option value  ME  gt Maine lt  option gt  x000D       lt option value  MD  gt Maryland lt  option gt  x000D       lt option value  MA  gt Massachusetts lt  option gt  x000D       lt option value  MI  gt Michigan lt  option gt  x000D       lt option value  NH  gt New Hampshire lt  option gt  x000D       lt option value  NJ  gt New Jersey lt  option gt  x000D       lt option value  NY  gt New York lt  option gt  x000D       lt option value  NC  gt North Carolina lt  option gt  x000D       lt option value  OH  gt Ohio lt  option gt  x000D       lt option value  PA  gt Pennsylvania lt  option gt  x000D       lt option value  RI  gt Rhode Island lt  option gt  x000D       lt option value  SC  gt South Carolina lt  option gt  x000D       lt option value  VT  gt Vermont lt  option gt  x000D       lt option value  VA  gt Virginia lt  option gt  x000D       lt option value  WV  gt West Virginia lt  option gt  x000D     lt  optgroup gt  x000D   lt  select gt  x000D   x000D  using destroy   x000D   lt select class  js-example-programmatic  gt  x000D     lt optgroup label  Alaskan Hawaiian Time Zone  gt  x000D       lt option value  AK  gt Alaska lt  option gt  x000D       lt option value  HI  gt Hawaii lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Pacific Time Zone  gt  x000D       lt option value  CA  gt California lt  option gt  x000D       lt option value  NV  gt Nevada lt  option gt  x000D       lt option value  OR  gt Oregon lt  option gt  x000D       lt option value  WA  gt Washington lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Mountain Time Zone  gt  x000D       lt option value  AZ  gt Arizona lt  option gt  x000D       lt option value  CO  gt Colorado lt  option gt  x000D       lt option value  ID  gt Idaho lt  option gt  x000D       lt option value  MT  gt Montana lt  option gt  x000D       lt option value  NE  gt Nebraska lt  option gt  x000D       lt option value  NM  gt New Mexico lt  option gt  x000D       lt option value  ND  gt North Dakota lt  option gt  x000D       lt option value  UT  gt Utah lt  option gt  x000D       lt option value  WY  gt Wyoming lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Central Time Zone  gt  x000D       lt option value  AL  gt Alabama lt  option gt  x000D       lt option value  AR  gt Arkansas lt  option gt  x000D       lt option value  IL  gt Illinois lt  option gt  x000D       lt option value  IA  gt Iowa lt  option gt  x000D       lt option value  KS  gt Kansas lt  option gt  x000D       lt option value  KY  gt Kentucky lt  option gt  x000D       lt option value  LA  gt Louisiana lt  option gt  x000D       lt option value  MN  gt Minnesota lt  option gt  x000D       lt option value  MS  gt Mississippi lt  option gt  x000D       lt option value  MO  gt Missouri lt  option gt  x000D       lt option value  OK  gt Oklahoma lt  option gt  x000D       lt option value  SD  gt South Dakota lt  option gt  x000D       lt option value  TX  gt Texas lt  option gt  x000D       lt option value  TN  gt Tennessee lt  option gt  x000D       lt option value  WI  gt Wisconsin lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Eastern Time Zone  gt  x000D       lt option value  CT  gt Connecticut lt  option gt  x000D       lt option value  DE  gt Delaware lt  option gt  x000D       lt option value  FL  gt Florida lt  option gt  x000D       lt option value  GA  gt Georgia lt  option gt  x000D       lt option value  IN  gt Indiana lt  option gt  x000D       lt option value  ME  gt Maine lt  option gt  x000D       lt option value  MD  gt Maryland lt  option gt  x000D       lt option value  MA  gt Massachusetts lt  option gt  x000D       lt option value  MI  gt Michigan lt  option gt  x000D       lt option value  NH  gt New Hampshire lt  option gt  x000D       lt option value  NJ  gt New Jersey lt  option gt  x000D       lt option value  NY  gt New York lt  option gt  x000D       lt option value  NC  gt North Carolina lt  option gt  x000D       lt option value  OH  gt Ohio lt  option gt  x000D       lt option value  PA  gt Pennsylvania lt  option gt  x000D       lt option value  RI  gt Rhode Island lt  option gt  x000D       lt option value  SC  gt South Carolina lt  option gt  x000D       lt option value  VT  gt Vermont lt  option gt  x000D       lt option value  VA  gt Virginia lt  option gt  x000D       lt option value  WV  gt West Virginia lt  option gt  x000D     lt  optgroup gt  x000D   lt  select gt  x000D   x000D   lt button class  js-programmatic-set-val  gt set value lt  button gt  x000D   x000D   x000D

User · Answer

HTML   lt select id  lang   gt      lt option value  php  gt php lt  option gt      lt option value  asp  gt asp lt  option gt      lt option value  java  gt java lt  option gt   lt  select gt    JS       lang   select2   val  php   trigger  change select2      source  https   select2 github io options html

User · Answer

For multiple values something like this       HouseIds   select2  val    Newtonsoft Json JsonConvert SerializeObject Model HouseIds      which will translate to something like this      HouseIds   select2  val    35293 49525

User · Answer

SELECT2  lt  V4   Step  1  HTML  lt input name  quot mySelect2 quot  type  quot hidden quot  id  quot mySelect2 quot  gt   Step  2  Create an instance of Select2    quot  mySelect2 quot   select2         placeholder   quot My Select 2 quot         multiple  false        minimumInputLength  1        ajax              url   quot  elements all quot             dataType   json             quietMillis  250            data  function term  page                  return                     q  term                                          results  function data  page                  return  results  data                          cache  true                formatResult  function element             return element text          element id                       formatSelection  function element             return element text          element id                       escapeMarkup  function m              return m               Step  3  Set your desired value    quot  mySelect2 quot   select2  data     id  quot elementID quot   text   quot Hello  quot       If you use select2 without AJAX you can do as follow   lt select name  quot mySelect2 quot  id  quot mySelect2 quot  gt     lt option value  quot 0 quot  gt One lt  option gt     lt option value  quot 1 quot  gt Two lt  option gt     lt option value  quot 2 quot  gt Three lt  option gt   lt  select gt       quot One quot  will be the selected option        name mySelect2    val  quot 0 quot     You can also do so     quot  mySelect2 quot   select2  quot val quot    quot 0 quot       SELECT2 V4   For select2 v4 you can append directly an option s as follow   lt select id  quot myMultipleSelect2 quot  multiple  quot  quot  name  quot myMultipleSelect2   quot  gt       lt option value  quot TheID quot  selected  quot selected quot  gt The text lt  option gt                                                                      lt  select gt   Or with JQuery  var  newOption      quot  lt option selected  selected  gt  lt  option gt  quot   val  quot TheID quot   text  quot The text quot        quot  myMultipleSelect2 quot   append  newOption  trigger  change     other example    quot  myMultipleSelect2 quot   val 5  trigger  change

User · Answer

In select2  lt  version4 there is the option initSelection   for remote data loading  through which it is possible to set initial value for the input as in edit mode       e6   select2       placeholder   Search for a repository       minimumInputLength  1      ajax                instead of writing the function to execute the request we use Select2 s convenient helper         url   https   api github com search repositories           dataType   json           quietMillis  250          data  function  term  page                return                   q  term     search term                                   results  function  data  page                   parse the results into the format expected by Select2                 since we are using custom formatting functions we do not need to alter the remote JSON data             return   results  data items                       cache  true            initSelection  function element  callback               the input tag has a value attribute preloaded that points to a preselected repository s id            this function resolves that id attribute to an object that select2 can render            using its formatResult renderer - that way the repository name is shown preselected         var id     element  val            if  id                         ajax  https   api github com repositories     id                    dataType   json                 done function data    callback data                            formatResult  repoFormatResult     omitted for brevity  see the source of this page     formatSelection  repoFormatSelection      omitted for brevity  see the source of this page     dropdownCssClass   bigdrop      apply css that makes the dropdown taller     escapeMarkup  function  m    return m       we do not want to escape markup since we are displaying html in results       Source Documentation   Select2 - 3 5 3

User · Answer

In Select2 V 4  use      selector   select2   val value to select  trigger  change     I think it should work

User · Answer

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   UPDATE   This does work  just wanted to note that in the new select2   a key  is  text  in a standard select2 object  so   id  100  text   Lorem Ipsum     Example        all contacts   select2  data    id   123   text   res data primary email       Thanks to  NoobishPro

User · Answer

I think you need the initSelection function       programid   select2     placeholder   Select a Program     allowClear  true    minimumInputLength  3    ajax        url   ajax php       dataType   json       quietMillis  200      data  function  term  page          return           term  term    search term         flag   selectprogram           page  page    page number                     results  function  data          return  results  data                initSelection  function  element  callback        var id     element  val        if  id                   ajax  ajax php get where             data   programid  id           dataType   json           done function  data              each data  function  i  value              callback   text   value text   id   value id                                                 dropdownCssClass   bigdrop     escapeMarkup  function  m    return m

User · Answer

Html    lt select id  lang   gt      lt option value  php  gt php lt  option gt      lt option value  asp  gt asp lt  option gt      lt option value  java  gt java lt  option gt   lt  select gt    JavaScript       lang   select2   select2  val   asp      jsfiddle

User · Answer

To build ontop of  tomloprod s answer  By the odd chance that you are using x-editable  and have a select2 v4  field and have multiple items you need to pre-select  You can use the following piece of code       select2field   on  shown   function e  editable           test1    test2    test3    test4    each function k  v              Create a DOM Option and pre-select by default          var newOption   new Option v text  v id  true  true              Append it to the select           editable input  input  append newOption  trigger  change                   and here it is in action    x000D   x000D  var data     x000D    x000D      id  0  x000D      text   enhancement  x000D     x000D    x000D      id  1  x000D      text   bug  x000D     x000D    x000D      id  2  x000D      text   duplicate  x000D     x000D    x000D      id  3  x000D      text   invalid  x000D     x000D    x000D      id  4  x000D      text   wontfix  x000D    x000D     x000D   x000D      select2field   editable   x000D          type   select2   x000D          url        x000D          name   select2field   x000D          savenochange  true  x000D          send   always   x000D          mode   inline   x000D          source  data  x000D          value   bug  wontfix   x000D          tpl    lt select style  width  201px   gt    x000D          select2    x000D              width   201px   x000D              tags  true  x000D              tokenSeparators              x000D              multiple  true  x000D              data data x000D             x000D          success  function response  newValue    x000D              console log  success   x000D             x000D          error  function response  newValue    x000D              if  response status     500    x000D                  return  Service unavailable  Please try later    x000D                else   x000D                  return response responseJSON  x000D                x000D            x000D          x000D   x000D  var preselect    x000D        x000D          id  1  x000D          text   bug  x000D         x000D        x000D      id  4  x000D      text   wontfix  x000D    x000D     x000D   x000D       select2field   on  shown   function e  editable   x000D        preselect  each function k  v   x000D             Create a DOM Option and pre-select by default  x000D          var newOption   new Option v text  v id  true  true   x000D             Append it to the select x000D            editable input  input  append newOption  trigger  change    x000D           x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 1 js select2 min js  gt  lt  script gt  x000D   lt link href    cdnjs cloudflare com ajax libs select2 4 0 1 css select2 min css  rel  stylesheet    gt  x000D   x000D   lt link href    cdnjs cloudflare com ajax libs x-editable 1 5 0 bootstrap3-editable css bootstrap-editable css  rel  stylesheet   gt  x000D   lt script src    cdnjs cloudflare com ajax libs x-editable 1 5 0 bootstrap3-editable js bootstrap-editable min js  gt  lt  script gt  x000D   x000D   lt a id  select2field  gt bug  wontfix lt  a gt  x000D   x000D   x000D    I guess that this would work even if you aren t using x-editable  I hope that htis could help someone

User · Answer

Sometimes  select2   will be loading firstly  and that makes the control not to show previously selected value correctly  Putting a delay for some seconds can resolve this problem   setTimeout function                              costcentreid   select2                     3000

User · Answer

You should use   var autocompleteIds      EventId    autocompleteIds empty   append   lt option value  Id  gt Text lt  option gt    val  Id   trigger  change        For set multi selected values var data         Array Ids var option         Array options of Ids above autocompleteIds empty   append option  val data  trigger  change        Callback handler that will be called on success request done function  response  textStatus  jqXHR           append the new option         EventId   append   lt option value      response id      gt     response text     lt  option gt             get a list of selected values if any - or create an empty array     var selectedValues       EventId   val        if  selectedValues    null            selectedValues   new Array              selectedValues push response id        add the newly created option to the list of selected items         EventId   val selectedValues  trigger  change         have select2 do it s thing

User · Answer

If you are using an Input box  you must set the  multiple  property with its value as  true   For example    lt script gt        document  ready function               var arr      id  100  text   Lorem Ipsum 1                   id  200  text   Lorem Ipsum 2                  inputID   select2               data  arr              width  200              multiple  true                      lt  script gt

User · Answer

Just to add to anyone else who may have come up with the same issue with me.

I was trying to set the selected option of my dynamically loaded options (from AJAX) and was trying to set one of the options as selected depending on some logic.

My issue came because I wasn't trying to set the selected option based on the ID which needs to match the value, not the value matching the name!

User · Answer

You can use this code           country   select2  val    Your value   trigger  change      Put your desired value instead of Your value  Hope It will work

User · Answer

For Ajax  use     select2   val     trigger  change    That should solve the problem

User · Answer

I did like this-      drpServices   select2   val  0   trigger  change

User · Answer

An Phan s answer worked for me       inputID   select2  data    id  100  a key   Lorem Ipsum       But adding the change trigger the event      inputID   select2  data    id  100  a key   Lorem Ipsum    change

User · Answer

var  option       lt option selected gt  lt  option gt    val  1   text  Pick me         select id   append  option  trigger  change      Try this append then select  Doesn t duplicate the option upon AJAX call

User · Answer

This may help someone loading select2 data from AJAX while loading data for editing (applicable for single or multi-select):

During my form/model load :

  $.ajax({
        type: "POST",
        ...        
        success: function (data) {
          selectCountries(fixedEncodeURI(data.countries));
         }

Call to select data for Select2:

var countrySelect = $('.select_country');
function selectCountries(countries)
    {
        if (countries) {
            $.ajax({
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param({ 'idsSelected': countries }, true),

            }).then(function (data) {
                // create the option and append to Select2                     
                $.each(data, function (index, value) {
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                });
                // manually trigger the `select2:select` event
                countrySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        }
    }

and if you may be having issues with encoding you may change as your requirement:

function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    }

User · Answer

if you are getting your values from ajax, before calling

_x000D_

$("#select_location_id").val(value);_x000D_
$("#select_location_id").select2().trigger('change');

_x000D_

confirm that the ajax call has completed, using the jquery function when

_x000D_

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){_x000D_
      // the code here will be executed when all four ajax requests resolve._x000D_
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,_x000D_
      // status, and jqXHR object for each of the four ajax calls respectively._x000D_
    });

_x000D_

_x000D_ as described here [Wait until all jQuery Ajax requests are done?

User · Answer

you can use this code        programid   val   number 2    number 3    trigger  change      where 2 in  number 2  and 3 in  number 3  are id field in object array

[javascript] How to set selected value of jquery select2?

The answer is

SELECT2 < V4

Step #1: HTML

Step #2: Create an instance of Select2

Step #3: Set your desired value

SELECT2 V4

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to jquery-select2

Tags