How can I get the value of "optgroup label"?
I have this select item and javescript to retrieve the values of <optgroup label> and <option value>.
<html>
<select name="Names" id="select" style="display:none" >
<optgroup label="2005">
<option value="0">Septiembre</option>
<option value="1">Octubre</option>
<option value="2">Noviembre</option>
<option value="3">Diciembre</option>
</optgroup>
<optgroup label="2006">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</optgroup>
<optgroup label="2007">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</optgroup>
<optgroup label="2008">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</optgroup>
<optgroup label="2009">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</optgroup>
<javascript>
$(#select).change(function() {
alert('Year: ' + $('option:selected', this).closest('optgroup').attr('label') + ', Month: ' + $(this).val());
});
The "Month"'s value(<option value>) shows well, but
the "Year"'s value(<optgroup label>) always shows the LAST item of "optgroup". In this case, "2009". Not the "optgroup" of the selected option.
I cannot understand why. can anyone help me, please?