JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<!DOCTYPE html>

<html>

<head runat="server">
  <title></title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
</head>

<body>
  <select id="mySelect">
  </select>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
</body>
</html>

CSS

select {
  width: 300px;
}

/*.select2-results__options--nested {
    display: none;
}

.select2-container--default .select2-results__group {
	cursor: pointer;
}*/

JavaScript

$(document).on("ready", function() {
  var data = [
  {text:"Canada",id:"Canada",level:1,isActive:1},
{text:"Newfoundland and Labrador",id:"Newfoundland and Labrador",level:2,isActive:1},
{text:"Central Health",id:"Central Health",level:3,isActive:1},
{text:"Eastern Health",id:"Eastern Health",level:3,isActive:1},
{text:"Labrador–Grenfell Health",id:"Labrador–Grenfell Health",level:3,isActive:1},
{text:"Western Health",id:"Western Health",level:3,isActive:1},
{text:"Prince Edward Island",id:"Prince Edward Island",level:2,isActive:1},
{text:"Nova Scotia",id:"Nova Scotia",level:2,isActive:1},
{text:"Central Zone (N.S.)",id:"Central Zone (N.S.)",level:3,isActive:1},
{text:"Eastern Zone",id:"Eastern Zone",level:3,isActive:1},
{text:"Northern Zone",id:"Northern Zone",level:3,isActive:1},
{text:"Western Zone",id:"Western Zone",level:3,isActive:1},
{text:"New Brunswick",id:"New Brunswick",level:2,isActive:1}
  ];

  function formatResult(node) {
    var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
    return $result;
  };

  $("#mySelect").select2({
    placeholder: 'Select an option',
    width: "600px",
    data: data,
    formatSelection: function(item) {
      return item.text
    },
    formatResult: function(item) {
      return item.text
    },
    templateResult: formatResult,
  });
});