select2 test

by nkovacs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<select class="myselect">
</select>

CSS

.myselect {
  width: 500px;
}

JavaScript

var data = [{
  text: 'Client A',
  children: [{
    id: 1,
    text: 'Project 1',
  }],
}, {
  text: 'Client B',
  children: [{
    id: 2,
    text: 'Project 2',
    children: [{
    	id: 21,
    	text: 'Subproject 2 - 1'
  	}],
  }],
}, {
  text: 'Client C',
  children: [{
    id: 3,
    text: 'Project 3',
  }],
}, {
  text: 'Client D',
  children: [{
    id: 4,
    text: 'Project 4',
  }],
}, {
  text: 'Client E',
  children: [{
    id: 5,
    text: 'Project 5',
  }],
}];

$(".myselect").select2({
  data: data
})