JQuery retrieving text instead of value of select list

Question

I need to get the value from a select list but JQuery is returning the text within the options of the select.

I have the following simple code.

<select id="myselect">
   <option selected="selected">All</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

I then use the following JQuery, which I thought would get me the value

var myOption = $('#myselect').val()

but when I look at myOption I get the text of 'One' or 'two'?

Answer 1

update : add val().

console.log($('#myselect').val());

// all option's value
$('#myselect').find('option').each(function(){
    console.log($(this).text());
    console.log($(this).val());
});

// change event
$('#myselect').change(function(){
    console.log($(this).find(':selected').text());
    console.log($(this).find(':selected').val());
});

​ demo : http://jsfiddle.net/yLj4k/3/

Answer 2

I had this problem because the jQuery Val() function was in my head and I actually defined the options as <option val='xx'> instead of <option value='xx'>. That's what is causing the problem. See this updated jsfiddle.

<select id="myselect">
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

<select id="myselect2">
   <option val="1">One</option>
   <option val="2">Two</option>
</select>

<script>
$('select').change(function() {
    alert($(this).val());
});
</script>

The first select will alert "1" or "2" and the second select will alert "One" or "Two".