Edit in JSFiddle

$(document).ready(function () {
   // Get Select2 control 
   var $select2 = $('#example');

   // Get options with "value" attributes that are not selected by default
   var $defaultResults = $('option[value]:not([selected])', $select2);
   var defaultResults = [];
   $defaultResults.each(function () {
      var $option = $(this);
      defaultResults.push({
         id: $option.attr('value'),
         text: $option.text()
      });
   });
   
   // Initialize Select2 control
   $select2.select2({
      placeholder: 'State',
      minimumInputLength: 2,
      ajax: {
         delay: 250,
         url: 'https://api.myjson.com/bins/1avspc'
      },
      dataAdapter: $.fn.select2.amd.require('select2/data/extended-ajax'),
      defaultResults: defaultResults
   });
});
<h3><a href="">Predefined options for Select2 control using remote data source</a>: Show selected option</h3>

<select id="example" style="width:50%">
   <option></option>
   <option value="PA" selected>Pennsylvania</option>
   <option value="PA">Pennsylvania</option>
   <option value="VA">Virginia</option>
</select>

<hr><a href="https://www.gyrocode.com/articles/" target="_blank">See more articles</a> on <a href="https://www.gyrocode.com/articles/" target="_blank">Gyrocode.com</a>

External resources loaded into this fiddle: