JquerySelector2 set value programatically

Selector 2 using ajax,pageing

by Mani Deep

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select class="js-data-example-ajax" id="e1" style="width: 500px">
  <option value="3620194" selected="selected">select2/select2</option>
</select>
<br>
<br>
<br>
<input type="button" id="test_button" value="Click to set value" />

CSS

.td {
  border: 1px solid black !important;
}

JavaScript

var $ajax = $("#e1");
$ajax.select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  },
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection
});

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = '<div class="row"><table><tr><td style="border: 1px solid;">' +
    '<div >' + repo.full_name + '</div></td>' +
    '<td style="border: 1px solid;><div class="col-md-6"><span>' + repo.forks_count + '</span></div></td>' +
    '<td style="border: 1px solid;><div>' + repo.stargazers_count + '</div></td>' +
    '</tr></table></div>';
  return markup;
}
$('#test_button').on('click', function() {
  console.log($ajax.select2('data'));
  $ajax.select2('data', {
    id: 1,
    label: 'NEW VALUE'
  }, true);
  return false;
});