Jquery recibe la etiqueta de OPTGROUP de la opción de selección

Question

Estoy tratando de encontrar el valor de la etiqueta de grupo de opciones actualmente seleccionada en un control de selección. a continuación hay algunos html para mostrar lo que estoy tratando de hacer.

<select id='sector_select' name='sector_select' data-placeholder="Select Sector..." style="width:200px;" class="chzn-select">  
    <option value='' selected='selected'>All Sectors</a> 
    <optgroup label="Consultancy Services"> 
     <option value='Employment placement/ recruitment'>Employment placement/ recruitment</option> 
    </optgroup> 
    <optgroup label="Supplies"> 
     <option value='Food, beverages and related products'>Food, beverages and related products</option> 
    </optgroup>     
</select> 
<script type="text/javascript"> 
$('#sector_select').change(function() 
{ 
    var label=$('sector_select :selected').parent().attr('label'); 
    console.log(label); 
});  
</script> 

el código anterior da indefinido debido a que su padre lectura del selecto elemento distinto opción. ¿algunas ideas?

Answer 1

Te echa aquí # en el ID selector.

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

También tenemos un </a> etiqueta espuria en

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

El estilo podría mejorar, después de eso:

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

Esto todavía registrará undefined para el cual <option> no está en un <optgroup>; cómo manejas ese escenario depende de ti. Demostración: 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); 
});​