select2.js multiple

by lemon kazi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

<select multiple name="event_type[]" class="form-control" id="selectEvents" style="width: 100%;">
  
</select>

JavaScript

var countryOptions = '';
        var allNailsJsonFile = [
	{
	  "id":"1",
	  "name":"USA"
	}, 
	{
	  "id":"2",
	  "name":"Canada"
	}, 
	{
	  "id":"3",
	  "name":"Australia"
	}
];
 console.log(allNailsJsonFile);
 
var s2 = $("#selectEvents").select2({
    placeholder: 'Search by country',
          //allowClear: true,
		width: 'resolve',
});

var vals = ["1"];

countryOptions += '<option value="">Select country</option>';
          $.each(allNailsJsonFile, function(key, country){
            countryOptions += '<option value="'+country.id+'">'+country.name+'</option>';
          });
s2.html(countryOptions);


s2.val(vals).trigger("change");