JQuery получает метку OPTGROUP для опции выбора

Я пытаюсь найти значение метки optgroup текущего выбранного параметра в элементе управления select. ниже - некоторый html, чтобы показать, что я пытаюсь сделать.

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

приведенный выше код дает undefined, потому что его родитель чтения элемента select отличается от опции. любые идеи?

Ответы

Ответ 1

Вам не хватает # в идентификатор селектора.

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

У вас также есть ложный тег </a> в

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

Стиль может использовать некоторое улучшение, после чего:

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

Это будет записывать undefined для <option>, который не находится в <optgroup>; как вы справляетесь с этим сценарием, зависит от вас. Демо: http://jsfiddle.net/mattball/fyLJm/

просто интересно, можете ли вы написать функцию, которая принимает любой идентификатор элемента select и возвращает метку optgroup выбранного элемента. 'this' меня смущает в $(). функция, которую я могу использовать вне события 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);
});​