JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.js"></script>
<select class="js-example-data-array"></select>

<select class="js-example-data-array-selected">
  <option value="2" selected="selected">duplicate</option>
</select>

JavaScript

var data = [{
  id: 'p0',
  text: 'enhancement',
  children: [{
    id: 'c5',
    text: 'enhancement child1'
  }, {
    id: 'c6',
    text: 'enhancement child2'
  }]
}, {
  id: 'c1',
  text: 'bug'
}, {
  id: 'c2',
  text: 'duplicate'
}, {
  id: 'c3',
  text: 'invalid'
}, {
  id: 'c4',
  text: 'wontfix'
}];

$(document).ready(function() {
  $(".js-example-data-array").select2({
    data: data
  });

  $(".js-example-data-array-selected").select2({
    data: data
  });
});