JSFiddle - React, Tailwind, and code Playground

HTML

<select title="Fruits" multiple="multiple" id="fruits" name="fruits[]">
    <option selected="selected" label="All" value="">All</option>
    <optgroup label="" class="fruit">
        <option label="apple" value="1">Apple</option>
        <option label="pear" value="2">Pear</option>
        <option label="orange" value="3">Orange</option>
    </optgroup>
    <optgroup label="" class="berries">
        <option label="strawberry" value="4">Strawberry</option>
        <option label="raspberry" value="5">Raspberry</option>
        <option label="blueberry" value="6">Blueberry</option>
    </optgroup>
</select>

JavaScript

$("#fruits").change(function(){
   alert($("#fruits option").filter(":selected").parent("optgroup").attr("class")); 
});