How to get option group of selected item on .chosen().change()

by Abhijeet Deshmukh

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select class="chosen" style="width:300px;">
  <optgroup label="fruit">
    <option value="1">apples</option>
    <option value="2">pears</option>
  </optgroup>
  <optgroup label="veg">
    <option value="3">neeps</option>
    <option value="4">tatties</option>
  </optgroup>
  <optgroup label="omnivore">
    <option value="5">bear</option>
    <option value="6">rats</option>
  </optgroup>
</select>

JavaScript

$('.chosen').chosen().change(
  function(evt) {
    var label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label');
    alert(label);
  });