Setting initial values on load with Select2 with Ajax

Question

I have select2 controls set up with Ajax  have both single and multiple    I m trying to have some values on page load but I m not able to get this to work however   My code for select2 is given below   function AjaxCombo element  url  multival        multival   true or false   multival   multival    false      element  select2      minimumInputLength  2     multiple  multival     separator          ajax         url  url       dataType   json        data  function  term  page            var targetname     this  attr  name            var target   targetname slice targetname indexOf      1  targetname indexOf               return            targettype   search            target  target           search  term                        results  function  data  page           return   results  data                       AjaxCombo   ajaxselect    includes linkedcontrol php   false   AjaxCombo   ajaxmultiselect    includes linkedcontrol php   true     The Ajax combo works fine  am having trouble only with the initial values load   I tried this code below but couldn t get it to work   initSelection   function  element  callback        var elementText     element  attr  data-initvalue        callback elementText       My HTML from php is returned as below     lt input name  header country   class  ajaxselect   data-initvalue     id   IN   name   India     data-placeholder  Select Country  value      gt    I see that values are populated from php  only my jquery is having issues  My values in the control show up as US   United States of America   I guess I have edited the select2 source for getting this format as default without using format option   Can anyone please help me populate the default values   Thanks in advance   EDIT  This question pertains to Select2 version  lt 4 0   This option is removed from v4 0 and is much simpler now

User · Answer

you can use the following     element  select2  data      id  result id  text                              id  2  text

User · Answer

Updated to new version   Try this solution from here http   jsfiddle net EE9RG 430       sel2   select2   multiple true  ajax      select2   data            id   2127   text   Henry Ford     id   2199   text   Tom Phillips

User · Answer

A very weird way for passing data  I prefer to get a JSON string object from server and then assign values and stuff   Anyway  when you do this var elementText     element  attr  data-initvalue    you re getting this    id   IN   name   India     That result you must PARSE it as suggested above so you can get the real vales for id   IN   and name  India    Now there are two scenarios  multi-select  amp  single-value Select2   Single Values     element  select2       initSelection   function  element  callback            var data    id   IN   text   INDIA            callback data          Then the rest of your configurations  e g   ajax  allowClear  etc         Multi-Select      tags   select2       initSelection   function  element  callback            var countryId    IN     Your values that somehow you parsed them         var countryText    INDIA            var data        Array          data push  id  countryId  text  countryText     Push values to data array           callback data     Fill em             NOW HERE S THE TRICK  Like belov91 suggested  you MUST put this       element  select2  val          Even if it s a single or multi-valued Select2  On the other hand remember that you can t assign the Select2 ajax function to a  lt select gt  tag  it must be an  lt input gt    Hope that helped you  or someone    Bye

User · Answer

Late    but I think this will solve your problem        controlId   val SampleData  0  id  trigger  change      After the data binding       controlId   select2           placeholder  Select somthing           data  SampleData    data from ajax controll                 controlId   val SampleData 0  id  trigger  change

User · Answer

I ve added  initSelection  function  element  callback           callback   id  1  text   Text          BUT also   select2  val          at the end   This solved my issue

User · Answer

The function which you are specifying as initSelection is called with the initial value as argument  So if value is empty  the function is not called  When you specifiy value     id   IN   name   India     instead of data-initvalue the function gets called and the selection can get initialized

User · Answer

These answer are pretty outdated   Some work in certain situations  but this is in the documentation  https   select2 org programmatic-control add-select-clear-items preselecting-options-in-an-remotely-sourced-ajax-select2 Basically you need create and append the selected options     Set up the Select2 control     mySelect2   select2       ajax            url    api students                Fetch the preselected item  and add to the control var studentSelect       mySelect2      ajax       type   GET       url    api students s     studentId    then function  data           create the option and append to Select2     var option   new Option data full name  data id  true  true       studentSelect append option  trigger  change            manually trigger the  select2 select  event     studentSelect trigger           type   select2 select           params                data  data

User · Answer

Maybe this work for you   This works for me     initSelection  function  element  callback                 callback   id  1  text   Text          Check very well that code is correctly spelled  my issue was in the initSelection  I had initselection

User · Answer

In my case the problem was rendering the output   So I used the default  text if the ajax data is not present yet     templateSelection  function data        return data name    data element innerText

User · Answer

var elem       container   find   name elemMutliOption     for  var i   0  i  lt  arrDynamicList length  i         elem find  option value     arrDynamicList i         attr  selected    selected      elem select2   trigger  change      This will work for people who are using the same view for multiple section in the page  with that being said it will work the same way for auto-setting defaults in your page OR better a EDIT page   The  FOR  goes through the array that has existing options already loaded in the DOM

User · Answer

Ravi  for 4 0 1-rc 1    Add all  lt option gt  elements inside  lt select gt   call  element val yourarray  trigger  change    after select2 init function    HTML    lt select name  Tags  id  Tags  class  form-control input-lg select2  multiple  multiple  gt          lt option value  1  gt tag 1 lt  option gt          lt option value  2  gt tag 2 lt  option gt          lt option value  3  gt tag 3 lt  option gt    lt  select gt    JS   var  tagsControl       Tags   select2           ajax                url    Tags Search               dataType   json               delay  250              results  function  data                    return                       results    map data  function  item                            return                               text  item text                              id  item id                                                                                                cache  false                    minimumInputLength  2          maximumSelectionLength  6              var data           var tags       Tags option   each function              data push   this  val                  tagsControl val data  trigger  change      This issue was reported but it still opened  https   github com select2 select2 issues 3116 issuecomment-146568753

User · Answer

Change the value after the page loads      data   val     change

[jquery] Setting initial values on load with Select2 with Ajax

Examples related to jquery

Examples related to ajax

Examples related to jquery-select2