Get the optgroup label and option value and display in a div with Jquery

Question

I have the following code:

<select>
    <optgroup label="fruta">      
        <option value="banana">banana</option>
        <option value="uva">uva</option>
    </optgroup>

    <optgroup label="legume">
        <option value="batata">batata</option>
        <option value="cenoura">cenoura</option>
    </optgroup>
</select>
<div id="label_value"></div>

I would like in Jquery to take the value of the label and value and play in a div.

Answer 1

You can do it like this:

$('select').change(function () {
    var label = $(this).find(':selected').closest('optgroup').attr('label');
    $('#label_value').html(label);
});

jsFiddle: http://jsfiddle.net/cujweb2h/

The code retrieves the option selected and then goes up in the DOM to get the optgroup of that option. There reads the attribute label.

Answer 2

Sergio, thank you very much. I am learning now to do JS and I am inventing certain situations and practice. I even wanted not only the "label" attribute to appear, but the option "value" attribute to appear next to it. Then I made the following changes

$(window).load(function(){
  $('select').change(function () {
    var label = $(this).find(':selected').closest('optgroup').attr('label');
    var value = $(this).find(':selected').closest('option').attr('value');
    $('#label_value').html(label+value);
});
});