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

Your question is a bit confusing. You say you want to get 1 or 2 but your are getting one and two instead? If yes, I cannot reproduce your problem: jsfiddle.net/xmvFS. Make sure your option elements actually have a value attribute or provide a demo. If it is vice versa and you want to get the text, it's a duplicate of stackoverflow.com/questions/196684/… — Felix Kling
– Felix Kling, Commented Apr 19, 2012 at 10:24
i agree with Henry P, jsfiddle.net/QNRjg I think the problem is elsewhere. Are the values added in the HTML just the way you ve shown in your question? Or are they populated later through a ajax call maybe. — walmik
– walmik, Commented Apr 19, 2012 at 10:30
@Deviland as we cannot reproduce the problem from the example you have posted, you may have to post more code. e.g. are you using myOption anywhere else? — Henry
– Henry, Commented Apr 19, 2012 at 10:41

GeckoTang · Accepted Answer · 2012-04-19 11:11:20Z

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/

Hugo Delsing · Accepted Answer · 2018-03-26 09:52:05Z

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

Thanks I was going crazy with this... then realized I typed "val" instead of "value" :)
damn... I really did not know what's going on, and I knew .val() works as I use it all the time. I typed val="" as well. Thank you.

Pranay Rana · Accepted Answer · 2012-04-19 10:32:52Z

7

to get the text value easiest way is

For selected option Text :

$("#myselect option:selected").text();

For selected option value:

$("select#myselect").val();

edited Apr 19, 2012 at 10:32

answered Apr 19, 2012 at 10:23

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

2 Comments

Pranay Rana Over a year ago

@devnull69 - check the answer i wrote both how to get value and how to get text of selected option ...

Henry Over a year ago

the question seems to be "why is val() returning the text", I'm not sure how that is answered.

tusar · Accepted Answer · 2012-04-19 10:36:26Z

1

Demo

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

answered Apr 19, 2012 at 10:36

tusar

3,4306 gold badges41 silver badges62 bronze badges

Comments

Tats_innit · Accepted Answer · 2012-04-19 10:44:10Z

edit

Hiya

working demo here: using text http://jsfiddle.net/QtjTq/3/ && using val here http://jsfiddle.net/QtjTq/4/

like this for accessing text() - var myOption = $('#myselect option:selected').text() for accessing value - var myOption = $('#myselect option:selected').val()

to elaborate more:

for value if you want to access value= attribute use .val();

for text if you want to get the text i.e.one or two then use selected options ... option:selected with .text() api.

further if you want to read http://forum.jquery.com/topic/jquery-using-val-vs-text

hope this helps :) cheers

var myOption = $('#myselect option:selected').text() //**or whatever suit you** var myOption = $('#myselect option:selected').val() <select id="myselect"> <option value="1">One</option> <option value="2">Two</option> </select>

Collectives™ on Stack Overflow

JQuery retrieving text instead of value of select list

5 Answers 5

1 Comment

3 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

2 Comments

Comments

Comments

Linked

Related