JSFiddle - React, Tailwind, and code Playground

HTML

<select label="Breeding" class="parent-option">
  <option class="child-option" value="Foal Out" disabled style="font-weight: bold; color: #555555 " selected="false">Foal Out</option>
  <option value="Breeding, Foal Out, General">&nbsp;&nbsp; General</option>
  <option value="Breeding, Foal Out, Report">&nbsp;&nbsp; Report</option>

 <option class="child-option" value="Gestation" disabled style="font-weight: bold; color: #555555 " selected="false">Gestation</option>
  <option value="Breeding, Gestation,l General">&nbsp;&nbsp; General</option>
  <option value="Breeding, Gestation, Report">&nbsp;&nbsp; Report</option>

<option  class="child-option" value="Mare" disabled style="font-weight: bold; color: #555555 " selected="false">Mare</option>
  <option value="Breeding, Mare, AI Cooled Semen">&nbsp;&nbsp; AI Cooled Semen</option>
  <option value="Breeding, Mare, AI Frozen Semen">&nbsp;&nbsp; AI Frozen Semen</option>
</select>

CSS

.btn_upload {
cursor:pointer;
display:inline-block;
overflow:hidden;
position:relative;
margin-top:10px;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-box-shadow:inset 0 1px 0 0 #abbeef;
-webkit-box-shadow:inset 0 1px 0 0 #abbeef;
box-shadow:inset 0 1px 0 0 #abbeef;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a72d4',endColorstr='#1160b8');
background-color:#2a72d4;
border:1px solid #166b8a;
padding:5px 10px;
}

.btn_upload input {
cursor:pointer;
height:100%;
position:absolute;
filter:alpha(opacity=1);
-moz-opacity:0.01;
opacity:0.01;
}

.preview {
width:120px;
height:100px;
border:1px solid red;
margin-right:10px;
float:left;
}

JavaScript

$("select").change(function(){
   alert($("option:selected").prevAll(".child-option").val());
});