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

Question

For a simple option grouping, say:

   <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>

I'm able to get grab the selected option's id... Using:

    $('#my-chzn').chosen().change(
        function(evt) {
           var id = $(this).val();
           // ...or 
           var id_ = $(evt.target).val();
        }
    );

But is it possible to grab the <optgroup> label for a selected option? ie is there a handle/selector to grab the value 'fruit' when the selected option is 'pears'?

Many thanks for any help anyone's able to offer....

Answer 1

You can accomplish what you want as the code is shown below

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

Demo on fiddle