jQuery .val() is returning undefined on change of a select box

Question

I have a select box with some dates. I want to get the value of said dates when the input changes. I keep getting undefined for my value.

$('#date_pick').change(function(){
            var values = $('#date_pick:selected').val();
            alert(values);
});

Fiddle

Wow, thanks everyone. I must be really out of it today. As soon as I saw these solutions I knew...I KNEW! D: — Bri, Mar 19 '12 at 14:24
^ Just to clarify, that wasn't working out for me for some odd reason so I went the route I did. — Bri, Mar 28 '12 at 15:53

score 12 · Accepted Answer · answered Mar 19 '12 at 14:15

12

You need to put a space between the #date_pick and :selected.

var values = $('#date_pick :selected').val();

Fiddle: http://jsfiddle.net/PJT6r/9/

answered Mar 19 '12 at 14:15

JaredPar

733,204
149
1,241
1,454

Why now `$(this).val()` ?! -1 – gdoron Mar 19 '12 at 14:18
the fiddle is obviously just an example, he wants to get the value of the selected option... the other answers got it wrong – Marcelo Diniz Mar 19 '12 at 14:19
1

Actually, he doesn't need :selected there at all, although you're right that $('#date_pick :selected').val(); will work – Mick Sear Mar 19 '12 at 14:20
Yeah...the university coffee shop is closed today due to Spring Break. :( I can't believe I missed this. Thanks. – Bri Mar 19 '12 at 14:25

gdoron · Answer 2 · 2012-03-19T18:47:45.060

3

Getting the value of a <select> element (just like every other form element), is done with the val() function.

So in your case => $('#date_pick').val().

Note that in the change callback scope you don't need to re-select the element, this inside a callback is the DOM element that triggered the callback:

$('#date_pick').change(function() {
    alert($(this).val());
});

LIVE DEMO

edited Mar 19 '12 at 18:47

answered Mar 19 '12 at 14:17

gdoron

147,333
58
291
367

score 1 · Answer 3 · answered Mar 19 '12 at 14:15

1

you have to remove the 'selected'!

var values = $('#date_pick').val();

It's a caffeine issue, I'm sure.

answered Mar 19 '12 at 14:15

Alejandro B.

4,807
2
33
61

score 1 · Answer 4 · answered Mar 19 '12 at 14:16

1

or just var values = $(this).val();

answered Mar 19 '12 at 14:16

Manatok

5,506
3
23
32

score 1 · Answer 5 · edited Mar 28 '12 at 16:10

1

You don't need the :selected bit in your selector Use:

$(function(){
        $('#date_pick').change(function(){
                    var values = $('#date_pick').val();
                    alert(values);
        });
});

edited Mar 28 '12 at 16:10

gdoron

147,333
58
291
367

answered Mar 19 '12 at 14:17

Mick Sear

1,549
15
25

Bit of an easy one. I can see why people get confused with this though, because radio buttons and checkboxes don't work in quite the same way as select boxes. – Mick Sear Mar 19 '12 at 14:19

score 1 · Answer 6 · answered Mar 19 '12 at 14:18

1

You can;

 var values = $('#date_pick option:selected').val();

answered Mar 19 '12 at 14:18

Alex K.

171,639
30
264
288

The `option:selected` part of the selector is useless. you can safely delete it. – gdoron Mar 19 '12 at 20:41

score 0 · Answer 7 · answered Feb 13 '19 at 22:42

I was getting undefined/null values when trying to get value by ID. So I tried to get the selected value by select field Name.

<select name="date_pick" id="date_pick">
</select>

Then in jQuery,

$("select[name=date_pick]").val();

And result NOT Getting undefined / null.

jQuery .val() is returning undefined on change of a select box

7 Answers7

Linked