How can I set the initial value of Select2 when using AJAX

Question

I have a select2 v4 0 0 being populated from an Ajax array  If I set the val of the select2 I can see via javascript debugging that it has selected the correct item   3 in my case   however this is not shown in the select box  it is still showing the placeholder    Whereas I should be seeing something like this    In my form fields    lt input name  creditor id  type  hidden  value  3  gt   lt div class  form-group minimal form-gap-after  gt       lt span class  col-xs-3 control-label minimal  gt           lt label for  Creditor   gt Creditor  lt  label gt       lt  span gt       lt div class  col-xs-9  gt           lt div class  input-group col-xs-8 pull-left select2-bootstrap-prepend  gt               lt select class  creditor select2 input-xlarge form-control minimal select2 col-xs-8  gt                   lt option gt  lt  option gt               lt  select gt           lt  div gt       lt  div gt   lt  div gt    My javascript   var initial creditor id    3       creditor select2   select2       ajax           url    admin api transactions creditorlist          dataType   json          delay  250         data  function  params               return                   q  params term                  c id  initial creditor id                  page  params page                                processResults  function  data  page                return                   results  data                                 cache  true          placeholder   Search for a Creditor      width   element      theme   bootstrap      allowClear  true       on  select2 select   function  e          var selected   e params data        if  typeof selected      undefined                    name  creditor id     val selected creditor id                  allocationsDiv   hide                   name  amount cash     val                     name  amount cheque     val                     name  amount direct     val                     name  amount creditcard     val                       on  select2 unselecting   function  e               form   each function                  this reset                          allocationsDiv   hide                name  creditor id     val             val initial creditor id     How can I make the select box show the selected item rather than the placeholder  Should I be sending this as part of the AJAX JSON response perhaps   In the past  Select2 required an option called initSelection that was defined whenever a custom data source was being used  allowing for the initial selection for the component to be determined  This worked fine for me in v3 5

User · Answer

after spending a few hours searching for a solution, I decided to create my own. He it is:

 function CustomInitSelect2(element, options) {
            if (options.url) {
                $.ajax({
                    type: 'GET',
                    url: options.url,
                    dataType: 'json'
                }).then(function (data) {
                    element.select2({
                        data: data
                    });
                    if (options.initialValue) {
                        element.val(options.initialValue).trigger('change');
                    }
                });
            }
        }

And you can initialize the selects using this function:

$('.select2').each(function (index, element) {
            var item = $(element);
            if (item.data('url')) {
                CustomInitSelect2(item, {
                    url: item.data('url'),
                    initialValue: item.data('value')
                });
            }
            else {
                item.select2();
            }
        });

And of course, here is the html:

<select class="form-control select2" id="test1" data-url="mysite/load" data-value="123"></select>

User · Answer

The issue of being forced to trigger  change   drove me nuts  as I had custom code in the change trigger  which should only trigger when the user changes the option in the dropdown  IMO  change should not be triggered when setting an init value at the start   I dug deep and found the following  https   github com select2 select2 issues 3620  Example     dropDown val 1  trigger  change select2

User · Answer

Hi was almost quitting this and go back to select 3 5 1  But finally I got the answer       test   select2       placeholder   Select a Country       minimumResultsForSearch  2      ajax            url                 dataType   json           cache  false          data  function  params                    var queryParameters                         q  params term                                   return queryParameters                     processResults  function  data                return                   results  data items                                     var option1   new Option  new  true  true        status   append option1        status   trigger  change      Just be sure that the new option is one of the select2 options  I get this by a json

User · Answer

For a simple and semantic solution i prefer to define the initial value in HTML  example    lt select name  myfield  data-placeholder  Select an option  gt       lt option value  initial-value  selected gt Initial text lt  option gt   lt  select gt    So when i call    select   select2   ajax           the initial value is initial-value and its option text is Initial text   My current Select2 version is 4 0 3  but i think it has a great compatibility with other versions

User · Answer

You are doing most things correctly  it looks like the only problem you are hitting is that you are not triggering the change method after you are setting the new value  Without a change event  Select2 cannot know that the underlying value has changed so it will only display the placeholder  Changing your last part to   val initial creditor id  trigger  change      Should fix your issue  and you should see the UI update right away     This is assuming that you have an  lt option gt  already that has a value of initial creditor id  If you do not Select2  and the browser  will not actually be able to change the value  as there is no option to switch to  and Select2 will not detect the new value  I noticed that your  lt select gt  only contains a single option  the one for the placeholder  which means that you will need to create the new  lt option gt  manually   var  option       lt option selected gt  lt  option gt    val initial creditor id  text  Whatever Select2 should display      And then append it to the  lt select gt  that you initialized Select2 on  You may need to get the text from an external source  which is where initSelection used to come into play  which is still possible with Select2 4 0 0  Like a standard select  this means you are going to have to make the AJAX request to retrieve the value and then set the  lt option gt  text on the fly to adjust   var  select       creditor select2      select select2                initialize Select2 and any events  var  option       lt option selected gt Loading    lt  option gt    val initial creditor id     select append  option  trigger  change       append the option and update Select2    ajax      make the request for the selected data object   type   GET     url    api for single creditor     initial creditor id    dataType   json     then function  data         Here we should have the data object    option text data text  val data id      update the text that is displayed  and maybe even the value     option removeData       remove any caching data that might be associated    select trigger  change       notify JavaScript components of possible changes       While this may look like a lot of code  this is exactly how you would do it for non-Select2 select boxes to ensure that all changes were made

User · Answer

https   github com select2 select2 issues 4272 only this solved my problem  even you set default value by option  you have to format the object  which has the text attribute and this is what you want to show in your option  so  your format function have to use    to choose the attribute which is not empty

User · Answer

One scenario that I haven t seen people really answer  is how to have a preselection when the options are AJAX sourced  and you can select multiple  Since this is the go-to page for AJAX preselection  I ll add my solution here       mySelect   select2       ajax            url  endpoint          dataType   json           data                     Each of these gets processed by fnRenderResults                  id  usersId                  text  usersFullName                  full name  usersFullName                  email  usersEmail                  image url  usersImageUrl                  selected  true    Causes the selection to actually get selected                                   processResults  function data                 return                   results  data users                  pagination                        more  data next     null                                                        templateResult  fnRenderResults      templateSelection  fnRenderSelection     Renders the result with my own style     selectOnClose  true

User · Answer

It s works for me      Don t use jQuery  only HTML  Create the option value you will display as selected  If ID it s in select2 data it will selected automatically    lt select id  select2  name  mySelect2  gt     lt option value  mySelectedValue  gt          Hello  I m here     lt  option gt   lt  select gt    Select2 org - Default Pre Selected values

User · Answer

What I ve done is more clean and needs to make two arrays     one contains a list of Object with id and a text  in my case its id and name  depending of your templateResult   its what you get from ajax query  the second is only an array of ids  selection value    I initialize select2 using the first array as data  and the second as the val   An example function with as parameters a dict of id name   function initMyList values        var selected           var initials            for  var s in values            initials push  id  s  name  values s  name            selected push s                  myselect2   select2           data  initials          ajax                url    path to value                dataType   json               delay  250              data  function  params                    return                       term  params term                      page  params page    1                                                processResults  function  data  params                    params page   params page    1                   return                       results  data items                      pagination                            more   params page   30   lt  data total count                                                                     cache  true                    minimumInputLength  1          tokenSeparators                      placeholder   Select none  one or many values           templateResult  function  item    return item name             templateSelection  function  item    return item name             matcher  function term  text    return text name toUpperCase   indexOf term toUpperCase       -1                      myselect2   val selected  trigger  change        You can feed the initials value using ajax calls  and use jquery promises to do the select2 initialization

User · Answer

I am adding this answer mainly because I can t comment above  I found it was the comment by  Nicki and her jsfiddle  https   jsfiddle net 57co6c95   that eventually got this working for me    Among other things  it gave examples of the format for the json needed  The only change I had to make was that my initial results were returned in the same format as the other ajax call so I had to use    option text data 0  text  val data 0  id     rather than    option text data text  val data id

User · Answer

Create simple ajax combo with de initial seleted value for select2 4 0 3   lt select name  mycombo  id  mycombo   gt  lt  select gt                      lt script gt  document addEventListener  DOMContentLoaded   function  event        selectMaker create  table    idname    1       mycombo    2   type                                         lt  script gt      library  js  var selectMaker     create  function  table  fieldname  initialSelected  input  minimumInputLength   3  type     placeholder    Select a element         if  input data  select2              input select2  destroy              input select2           placeholder  placeholder          width   100            minimumInputLength  minimumInputLength          containerCssClass  type          dropdownCssClass  type          ajax                url   ajaxValues php getQuery true amp table     table     amp fieldname     fieldname     amp type     type              type   post               dataType   json               contentType   application json               delay  250              data  function  params                    return                       term  params term     search term                     page  params page                                               processResults  function  data                    return                       results    map data items  function  item                            return                               text  item name                              id  item id                                                                                                         if  initialSelected gt 0            var  option       lt option selected gt Cargando    lt  option gt    val 0           input append  option  trigger  change       append the option and update Select2           ajax     make the request for the selected data object             type   GET               url   ajaxValues php getQuery true amp table     table     amp fieldname     fieldname     amp type     type     amp initialSelected     initialSelected              dataType   json             then function  data                   Here we should have the data object              option text data items 0  name  val data items 0  id      update the text that is displayed  and maybe even the value               option removeData       remove any caching data that might be associated             input trigger  change       notify JavaScript components of possible changes                          and the php server side   lt  php if  isset   GET  getQuery     amp  amp  isset   GET  table     amp  amp  isset   GET  fieldname         parametros carga de petici  n parse str file get contents  php   input     data    data    object   data  if  isset  data- gt term          term   pSQL  data- gt term    else       term         if  isset   GET  initialSelected           id  pSQL   GET  initialSelected      else       id         if    GET  table       mytable   amp  amp    GET  fieldname       mycolname   amp  amp    GET  type       mytype          if  empty  id             where    and name like        term              else            where    and id     id              rows   yourarrayfunctionfromsql  SELECT id  name                      FROM yourtable                     WHERE 1      where                         ORDER BY name         items   array  items    gt   rows    var   json encode  items   echo  var    gt

User · Answer

If you are using a templateSelection and ajax  some of these other answers may not work   It seems that creating a new option element and setting the value and text will not satisfy the template method when your data objects use other values than id and text   Here is what worked for me       selectElem   select2     ajax             data   YOUR DEFAULT OBJECT     templateSelection  yourCustomTemplate      Check out the jsFiddle here  https   jsfiddle net shanabus f8h1xnv4  In my case  I had to processResults in since my data did not contain the required id and text fields   If you need to do this  you will also need to run your initial selection through the same function   Like so       js-select2   select2     ajax        url  SOME URL      processResults  processData        data  processData  YOUR INIT OBJECT   results    minimumInputLength  1    templateSelection  myCustomTemplate      function processData data      var mapdata     map data  function  obj              obj id   obj Id      obj text         obj Code          obj Description      return obj          return   results  mapdata        function myCustomTemplate item         return   lt strong gt     item Code     lt  strong gt  -     item Description

[jquery-select2] How can I set the initial value of Select2 when using AJAX?

Examples related to jquery-select2

Examples related to jquery-select2-4