Dynamically add item to jQuery Select2 control that uses AJAX

Question

I have a jQuery Select2 control that uses AJAX to populate    lt input type  text  name  select2  id  select2  style  width 400px  value  999  gt   var initialSelection     id   999   text  Some initial option         select2   select2       placeholder   Select Option       minimumInputLength  2      ajax             url    servletToGetMyData           dataType   json           data  function  term  page    return   term  term               results  function  data  page     return   results  data results               initSelection   function element  callback   callback initialSelection               escapeMarkup  function  m    return m           The AJAX links to a database of possible options and as you can see requires two characters of input   The problem is the user can use a dialog to add a new option if the option doesn t exist in the database   Upon return from that dialog  I try   var o       lt option  gt     value  newID  text  newText        select2   append o       select2 option value      newID         prop  selected  true       select2   trigger  change      But it doesn t work   The same exact code works for non-AJAX Select2 boxes   I ve tried various alternatives  like using     select2   select2  val   newID   but it doesn t work   I ve even tried completely deleting the Select2 control   However      select2   remove   only removes the original  lt input gt  field but leaves the Select2 control lingering around   Note that the page has more than one Select2 control  so I can t use a class selector for Select2 controls as it will remove other controls that I need   Any idea how to either a  dynamically add an option to a Select2 control that uses AJAX  or b  completely delete a Select2 control so that it can be programmatically added back  Or any other solution     Edit I found another question that shows how to remove a select2 element  using  select2  destroy     This works but is  in my opinion  sub-optimal   I would much prefer to be able to just add the option than to destroy and re-create the select2

User · Answer

To get dynamic tagging to work with ajax, here's what I did.

Select2 version 3.5

This is easy in version 3.5 because it offers the createSearchChoice hook. It even works for multiple select, as long as multiple: true and tags: true are set.

HTML

<input type="hidden" name="locations" value="Whistler, BC" />

JS

$('input[name="locations"]').select2({
  tags: true,
  multiple: true,
  createSearchChoice: function(term, data) {
    if (!data.length)
      return { id: term, text: term };
    },
  ajax: {
    url: '/api/v1.1/locations',
    dataType: 'json'
  }
});

The idea here is to use select2's createSearchChoice hook which passes you both the term that the user entered and the ajax response (as data). If ajax returns an empty list, then tell select2 to offer the user-entered term as an option.

Demo: https://johnny.netlify.com/select2-examples/version3

Select2 version 4.X

Version 4.X doesn't have a createSearchChoice hook anymore, but here's how I did the same thing.

HTML

  <select name="locations" multiple>
    <option value="Whistler, BC" selected>Whistler, BC</option>
  </select>

JS

$('select[name="locations"]').select2({
  ajax: {
    url: '/api/v1.1/locations',
    dataType: 'json',
    data: function(params) {
      this.data('term', params.term);
      return params;
    },
    processResults: function(data) {
      if (data.length)
        return {
          results: data
        };
      else
        return {
          results: [{ id: this.$element.data('term'), text: this.$element.data('term') }]
        };
    }
  }
});

The ideas is to stash the term that the user typed into jQuery's data store inside select2's data hook. Then in select2's processResults hook, I check if the ajax response is empty. If it is, I grab the stashed term that the user typed and return it as an option to select2.

Demo: https://johnny.netlify.com/select2-examples/version4

User · Answer

In case of Select2 Version 4   it has changed syntax and you need to write like this      clear all option     select with blank data   html     select2  data    id      text              clear and add new option     select with data   html     select2  data      id      text         id   1   text   Facebook      id   2   text   Youtube      id   3   text   Instagram      id   4   text   Pinterest              append option     select with data   append   lt option value  5  gt Twitter lt  option gt         select with data   val  5        select with data   trigger  change

User · Answer

This is a lot easier to do starting in select2 v4   You can create a new Option  and append it to the select element directly   See my codepen or the example below    x000D   x000D    document  ready function     x000D          state   select2   x000D        tags  true x000D          x000D         x000D          btn-add-state   on  click   function    x000D        var newStateVal       new-state   val    x000D           Set the value  creating a new option if necessary x000D        if      state   find  option value     newStateVal        length    x000D              state   val newStateVal  trigger  change    x000D          else    x000D             Create the DOM option that is pre-selected by default x000D          var newState   new Option newStateVal  newStateVal  true  true   x000D             Append it to the select x000D              state   append newState  trigger  change    x000D           x000D            x000D      x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 1 css select2 min css  rel  stylesheet   gt  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 twitter-bootstrap 3 3 6 js bootstrap 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   x000D   x000D   lt select id  state  class  js-example-basic-single  type  text  style  width 90   gt  x000D     lt option value  AL  gt Alabama lt  option gt  x000D     lt option value  WY  gt Wyoming lt  option gt  x000D   lt  select gt  x000D   lt br gt  x000D   lt br gt  x000D   lt input id  new-state  type  text    gt  x000D   lt button type  button  id  btn-add-state  gt Set state value lt  button gt  x000D   x000D   x000D    Hint  try entering existing values into the text box  like  AL  or  WY    Then try adding some new values

User · Answer

Extending on Bumptious Q Bangwhistle s answer       select2   append     lt option gt           value  item      text   item      select2      This would add the new options into the  lt select gt  tags and lets select2 re-render it

User · Answer

This provided a simple solution   Set data in Select2 after insert with AJAX      select2   select2  data    id  newID  text  newText

User · Answer

In Select2 4 0 2      yourId   append   lt option value    item    selected gt   item   lt  option gt         yourId   trigger  change

User · Answer

I have resolved  issue with the help of this link  http   www bootply com 122726  hopefully will help you  Add option in select2 jquery and bind your ajax call with created link id  addNew  for new option from backend   and the code     getScript  http   ivaynberg github io select2 select2-3 4 5 select2 js  function           mySel   select2       width  240px       allowClear true      formatNoMatches  function term               customize the no matches output            return   lt input class  form-control  id  newTerm  value    term    gt  lt a href     id  addNew  class  btn btn-default  gt Create lt  a gt                 parent   find   select2-with-searchbox   on  click    addNew  function           add the new term        var newTerm       newTerm   val          alert  adding   newTerm           lt option gt   newTerm   lt  option gt    appendTo   mySel            mySel   select2  val  newTerm      select the new term         mySel   select2  close             close the dropdown               lt div class  container  gt       lt h3 gt Select2 - Add new term when no search matches lt  h3 gt       lt select id  mySel  gt           lt option gt One lt  option gt           lt option gt Two lt  option gt           lt option gt Three lt  option gt           lt option gt Four lt  option gt           lt option gt Five lt  option gt           lt option gt Six lt  option gt           lt option gt Twenty Four lt  option gt       lt  select gt       lt br gt       lt br gt   lt  div gt

User · Answer

I did it this way and it worked for me like a charm   var data      id  0  text   enhancement       id  1  text   bug       id  2        text   duplicate       id  3  text   invalid       id  4  text   wontfix               js-example-data-array   select2         data  data

User · Answer

my select   select2  destroy   empty   select2  data    id  1  text   new item

[jquery] Dynamically add item to jQuery Select2 control that uses AJAX

Examples related to jquery

Examples related to ajax

Examples related to jquery-select2