Select2 Tagging Example

Using Select2 v 4.0.0

by Mukesh Yadav

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select id="fieldId" multiple="multiple">
</select>

CSS

#fieldId {
  width: 100%
}

JavaScript

$(function() {
  $("#fieldId").select2({
    placeholder: "Pick items",
    data: [{
      text: 'group 1st',
      children: [{
        id: "one 1",
        text: "one 1"
      }, {
        id: "one 2",
        text: "one 2"
      }]
    }, {
      text: 'group 2nd',
      children: [{
        id: "two",
        text: "two"
      }, {
        id: "two 2",
        text: "two 2"
      }]
    }, {
      text: 'group 3rd',
      children: [{
        id: "three 1",
        text: "three 1"
      }, {
        id: "three 2",
        text: "three 2"
      }]
    }]
  });
});