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: http://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 http://stackoverflow.com/questions/196684/jquery-get-select-option-text — Felix Kling, Apr 19 '12 at 10:24
Is that all your code? Works fine: http://jsfiddle.net/38F6F/ — Henry, Apr 19 '12 at 10:25
i agree with Henry P, http://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, Apr 19 '12 at 10:30
I cannot see why either I agree that this should work and I have been using the change function also, I did not include here to simplify — Deviland, Apr 19 '12 at 10:38
OP is calling `1` as the `value` and `One` as the `text` in `` — tusar, Apr 19 '12 at 10:39
@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, Apr 19 '12 at 10:41

GeckoTang · Accepted Answer · 2012-04-19T11:11:20.333

16

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/

edited Apr 19 '12 at 11:11

answered Apr 19 '12 at 10:31

GeckoTang

2,697
1
16
18

OP asked for how to get the value rather than the text – devnull69 Apr 19 '12 at 10:42

score 8 · Answer 2 · answered Mar 26 '18 at 09:52

8

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

answered Mar 26 '18 at 09:52

Hugo Delsing

13,803
5
45
72

1

Thanks I was going crazy with this... then realized I typed "val" instead of "value" :) – Rolando Retana Apr 01 '18 at 23:55
I did id instead of value. Same problem. – PRMan Jul 06 '18 at 22:30
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. – Paul Jan 30 '22 at 06:00

Pranay Rana · Answer 3 · 2012-04-19T10:32:52.467

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 '12 at 10:32

answered Apr 19 '12 at 10:23

Pranay Rana

175,020
35
237
263

@devnull69 - check the answer i wrote both how to get value and how to get text of selected option ... – Pranay Rana Apr 19 '12 at 10:42
6

the question seems to be "why is `val()` returning the text", I'm not sure how that is answered. – Henry Apr 19 '12 at 10:43

score 1 · Answer 4 · answered Apr 19 '12 at 10:36

1

Demo

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

answered Apr 19 '12 at 10:36

tusar

3,364
6
37
60

Tats_innit · Answer 5 · 2012-04-19T10:44:10.977

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>

JQuery retrieving text instead of value of select list

5 Answers5