Jquery get label of OPTGROUP of select option

Question

I am trying to find the value of the optgroup label of currently selected option in a select control. below is some html to show what im trying to do.

Answer 1

You're missing the # in the ID selector.

$('#sector_select').change(function ()
{
    //           ↓
    var label=$('#sector_select :selected').parent().attr('label');
    console.log(label);
});

You've also got a spurious </a> tag in

<option value='' selected='selected'>All Sectors</a>

The style could use some improvement, after that:

$('#sector_select').on('change', function ()
{
    var label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label');
    console.log(label);
});

This will still log undefined for the <option> which is not in an <optgroup>; how you handle that scenario is up to you. Demo: http://jsfiddle.net/mattball/fyLJm/

---

just wondering if you can write up a function that takes whatever select element id and returns optgroup label of selected item. the 'this' confuses me within the $(). a function i can use outside the onchange event

function logOptgroupLabel(id)
{
    var elt = $('#'+id)[0];
    var label = $(elt.options[elt.selectedIndex]).closest('optgroup').prop('label');
    console.log(label);
}

$('#sector_select').on('change', function () {
    logOptgroupLabel(this.id);
});​