JSFiddle - React, Tailwind, and code Playground

by baryon

HTML

<select>
       <optgroup label="Level One">
         <option> A.1 </option>
         <optgroup label="       Level Two">
          <option>nbsp;nbsp;nbsp;nbsp; A.B.1 </option>
         </optgroup>
         <option> A.2 </option>
        </optgroup>

        <option> A </option>

</select>
<OPTGROUP LABEL="OptGroup Two" id="two">  
<OPTION LABEL="Paris">Paris</OPTION>  
<OPTION LABEL="London">London</OPTION> 
<OPTION LABEL="Florence">Florence</OPTION>  
</OPTGROUP>

</SELECT>

JavaScript

$("#my_select").change(function(){
  var $option = $('option:selected', this); // get selected option
  var optGroup = $option.closest('optgroup').index(); // get which optgroup
    alert($option);alert(optGroup);
  if(optGroup == 0){
    // first
      
  }
  else if(optGroup == 1){
    // second
  }
  else{
    // not first or second
  }
});