JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="http://ivaynberg.github.io/select2/select2-3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.5.2/select2.css">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
  <select 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="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
</body>
</html>

JavaScript

$("select").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;
  }
});