SO - 23514492

by Arun P Johny

HTML

<select>
    <optgroup 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>
    </optgroup>
</select>

JavaScript

$('select').change(function () {
    var $opt = $('option:selected', this),
        $parent = $opt.parent(),
        $child = $opt.prevAll('.child-option').addBack().first();
    console.log($parent.attr('label'))
    console.log($child.text())
})