Dynamically add item to jQuery Select2 control that uses AJAX

by

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:

$(document).ready(function() {
    $("#state").select2({
      tags: true
    });
      
    $("#btn-add-state").on("click", function(){
      var newStateVal = $("#new-state").val();
      // Set the value, creating a new option if necessary
      if ($("#state").find("option[value=" + newStateVal + "]").length) {
        $("#state").val(newStateVal).trigger("change");
      } else { 
        // Create the DOM option that is pre-selected by default
        var newState = new Option(newStateVal, newStateVal, true, true);
        // Append it to the select
        $("#state").append(newState).trigger('change');
      } 
    });  
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>


<select id="state" class="js-example-basic-single" type="text" style="width:90%">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<br>
<br>
<input id="new-state" type="text" />
<button type="button" id="btn-add-state">Set state value</button>

Hint: try entering existing values into the text box, like “AL” or “WY”. Then try adding some new values.

More Related Contents:

  1. How to Set Selected value in Multi-Value Select in Jquery-Select2.?
  2. Hide/Show div on specific page with jquery
  3. How to get a cross-origin resource sharing (CORS) post request working
  4. jQuery Ajax error handling, show custom exception messages
  5. Why is jQuery’s .ajax() method not sending my session cookie?
  6. How do I format a Microsoft JSON date?
  7. Submitting HTML form using Jquery AJAX
  8. jquery click doesn’t work on ajax generated content
  9. jQuery Ajax wait until all images are loaded
  10. Set Headers with jQuery.ajax and JSONP?
  11. AJAX jQuery.load versus jQuery.get
  12. How to call .ajaxStart() on specific ajax calls
  13. jquery ajax problem in chrome
  14. How to chain ajax calls using jquery
  15. jQuery.when understanding
  16. Passing list of values to django view via jQuery ajax call
  17. $(this) doesn’t work in a function
  18. jquery with ASP.NET MVC – calling ajax enabled web service
  19. Bottle Py: Enabling CORS for jQuery AJAX requests
  20. HTML Web Worker and Jquery Ajax call
  21. Difference between $.ajax(); and $.ajaxSetup();
  22. How can I set CORS in Azure BLOB Storage in Portal?
  23. Rails 4 rendering a partial with ajax, jquery, :remote => true, and respond_to
  24. update progress bar using ajax request seconds
  25. Display PDF using an AJAX call
  26. Using bootstrap select2 with JqGrid form
  27. How to use placeholder as default value in select2 framework
  28. Select2: How to prevent tags sorting
  29. Select2 v4 how to paginate results using AJAX
  30. What happens when no response is received for a request? I’m seeing retries

Leave a Comment