web-dev-qa-db-fra.com

Jquery obtient l'étiquette de OPTGROUP de l'option de sélection

J'essaie de trouver la valeur de l'étiquette optgroup de l'option actuellement sélectionnée dans un contrôle de sélection. ci-dessous est un html pour montrer ce que j'essaie de faire.

<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>

le code ci-dessus donne undefined car son parent de lecture de l'élément select autre que l'option. des idées?

jqueryhtmlhtml-select
25
Sir Lojik

Vous manquez le # dans Sélecteur ID .

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

Vous avez également un faux </a> faire

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

Le style pourrait utiliser une amélioration, après cela:

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

Cela enregistrera toujours undefined pour le <option> qui n'est pas dans un <optgroup>; la façon dont vous gérez ce scénario dépend de vous. Démo: http://jsfiddle.net/mattball/fyLJm/

je me demande simplement si vous pouvez écrire une fonction qui prend l'id de l'élément select et renvoie l'étiquette optgroup de l'élément sélectionné. le 'ceci' me confond dans le $ (). une fonction que je peux utiliser en dehors de l'événement onchange

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);
});​
55
Matt Ball