JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">
<select id="country" multiple="multiple" class="col-xs-5">
</select>

JavaScript

$(document).ready(function() {
        var countryOptions = '';
        var allNailsJsonFile = [
	{
	  "id":"1",
	  "name":"USA"
	}, 
	{
	  "id":"2",
	  "name":"Canada"
	}, 
	{
	  "id":"3",
	  "name":"Australia"
	}
];
        $.getJSON(allNailsJsonFile, function(data){
          countryOptions += '<option value="">Select country</option>';
          $.each(data, function(key, country){
            countryOptions += '<option value="'+country.id+'">'+country.name+'</option>';
          });
          $('#country').html(allNailsJsonFile);
        });

        console.log(countryOptions)
        var selectedValues = ["Australia"];
         $('#country').select2({
          placeholder: 'Search by country',
          //allowClear: true,
          width: 'resolve',
          //data: selectedValues
        });
        $('#country').val(selectedValues).trigger('change');
});