Get current selected option

Question

<select id="sel">
    <option id="1">aa</option>
    <option id="2">bb</option>
    <option id="3">cc</option>
</select>

$("#sel").change(function(){
   alert($(this).children().attr('id'))
})

LIVE: http://jsfiddle.net/cxWVP/

How can i get current selected option ID? Now always show me id="1".

Answer 1

$('#sel').change(function(){
   alert($(this).find('option:selected').attr('id'));
});

should work.

Answer 2

http://jsfiddle.net/cxWVP/1/

$("#sel").change(function(){
   alert( this.options[this.selectedIndex].id );
})

Answer 3

<option> tags should have a value attribute. When one is selected, you get it's value using $("#sel").val().

<select id="sel">
    <option value="1">aa</option>
    <option value="2">bb</option>
    <option value="3">cc</option>
</select>

$("#sel").change(function(){
   alert($(this).val())
});

DEMO: http://jsfiddle.net/yPYL5/

Answer 4

http://jsfiddle.net/ugUYA/

To get the selected option inside a select element, you can use selectedIndex, then you can use the options array to get to the selected option object

$("#sel").change(function(){
   alert( this.options[this.selectedIndex].id )
})