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="Home">
    <option value="breakingNews" class="breakingNews">Breaking News</option>
    <option value="homeTopMain">Top Main</option>
    <option value="homeLatest1">Latest 1</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>

JavaScript

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

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

 $(function() {
      //Here you add the bottom pixels you need. I added 200px.
      $('.select2-selection__rendered').css({top:'50px',position:'relative'});
   });
    //$('.select2-container').append("<div style='height:100px'></div>");