JSFiddle - React, Tailwind, and code Playground

HTML

<select id="test">
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

JavaScript

$('select').on('change', function(e){
        var picker_id=e.target.id;
        var selected_option = $(this).find(":selected");
        var selected_value = selected_option.val();
        var optgroup = selected_option.parent().attr('label');
        console.log(optgroup);
        switch ( optgroup){
            case "group_name":

            break

        }
});