Dynamic Select2

by Scott Smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<div>
  <p>
    I do wish they would fix the clear option. They do know about it.
  </p>
  <select id='sel2'>
    <option>select country</option>
  </select>
  <br />
  <button type='button' id='btnGetMore'>
    Get More
  </button>
</div>

JavaScript

var data1 = [{
  "code": "AI",
  "country": "Anguilla"
}, {
  "code": "AQ",
  "country": "Antarctica"
}, {
  "code": "AG",
  "country": "Antigua and Barbuda"
}, {
  "code": "AR",
  "country": "Argentina"
}, {
  "code": "AM",
  "country": "Armenia"
}, {
  "code": "AW",
  "country": "Aruba"
}, {
  "code": "AU",
  "country": "Australia"
}, {
  "code": "AT",
  "country": "Austria"
}, {
  "code": "AZ",
  "country": "Azerbaijan"
}];

var data2 = [{
  "code": "BS",
  "country": "Bahamas"
}, {
  "code": "BH",
  "country": "Bahrain"
}, {
  "code": "BD",
  "country": "Bangladesh"
}, {
  "code": "BB",
  "country": "Barbados"
}, {
  "code": "BY",
  "country": "Belarus"
}, {
  "code": "BE",
  "country": "Belgium"
}, {
  "code": "BZ",
  "country": "Belize"
}];

var sel2Options = {
  placeholder: "Select a country",
  allowClear: true
};
$(function($) {

  $.each(data1, function(idx, itm) {
    $("#sel2").append("<option value='" + itm.code + "'>" + itm.country + "</option>");

  });
  $("#sel2").select2(sel2Options);
  $("#btnGetMore").button().on("click", function() {
    var selCode = $("#sel2").val();

    $.each(data2, function(idx, itm) {
      $("#sel2").append("<option value='" + itm.code + "'>" + itm.country + "</option>")
    });

    $("#sel2").select2("destroy");
    $("#sel2").select2(sel2Options);
    $("#sel2").val(selCode).trigger("change");

  })
});