Select2 demo

by koh_edwin

HTML

<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<select id="example" multiple="multiple" style="width: 300px">
  <optgroup label="Hospital Type">
    <option value="Hospital type" >Hospital Type</option>
    <option value="Hosp type and Sex">and Sex</option>
    <option value="Hosp type and Sex and Mental Age Group1">and Sex and Mental Age Group</option>
    <option value="homeLatest2">Latest 2</option>
    <option value="homeLatest3">Latest 3</option>
    <option value="homeList1">List 1</option>
    <option value="homeList2">List 2</option>
    <option value="homeList3">List 3</option>
  </optgroup>
  <optgroup label="Pakistan">
    <option value="pakistanTop">Top</option>
    <option value="pakistanList">List</option>
  </optgroup>
  <optgroup label="World">
    <option value="worldTop">Top</option>
    <option value="worldList">List</option>
  </optgroup>
</select>

CSS

select{
  width:300px;
}

JavaScript

function formatState (item) {
  opt = $(item.element);
  //console.log(opt.);
  og = opt.closest('optgroup').attr('label');
  return item.id; //(og==item.text) ? item.id : og+' '+item.id;
};

$('#example').select2({
  placeholder: 'Select a Category',
  templateSelection: formatState
});