JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<!DOCTYPE html >
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  
  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="pillbox.css">
  
</head>
<body>

  <select id="THISONE" style="width: 300px;" multiple="multiple">
    <!--option>red and random</option>
    <option>green  and random  and random  and random  and random</option>
    <option>blue  and random</option>
    <option>yellow  and random</option>
    <option>white</option>
    <option>black</option-->
  </select>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  
 
 
</body>
</html>

CSS

.select2-selection__choice {  /*this controls the pillboxes*/
    display:'';
}

.select1{
  display:none;
}

.SUP {
  -webkit-font-feature-settings: "sups";
  -moz-font-feature-settings: "sups";
  font-feature-settings: "sups";
  font-family: Calibri;
}

JavaScript

var array = ["Volvo","Saab","Mercades","Audi"];
var selectList = document.getElementById("THISONE");
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
	option.setAttribute('selected', 'selected');
    selectList.appendChild(option);
}

$("#THISONE").select2({
    templateResult: function (data) {
      var $res = $('<span></span>');
      var $check = $('<input type="checkbox" />');
      
      $res.text(data.text);
      
      if (data.element) {
        $res.prepend($check);
        $check.prop('checked', data.element.selected);
      }
  
      return $res;
    }
});

$("#THISONE").on('change', function(){
	console.log('here change')
})

$("#THISONE").on('select2:opening', function(){
	console.log('here opening')
	$('#THISONE').select2('close');

})

$("#THISONE").on('select2:open', function(){
	$('#THISONE').select2('close');
	console.log('here open')

})