jQuery retrieving select option value

Question

I have tried using both of these methods and none seem to retrieve the selected value or text of from the drop down menu.

My HTML:

<select id="sessions">
  <option value="0">Choose a Session</option>
  <option value="Awesome">Awesome</option>
  <option value="test1">test1</option>
  <option value="testing">testing</option>
</select>

First Method:

var selectedSession = $('#sessions').options[$('#sessions').selectedIndex].val();

This doesn't even get recognized since I get a an undefined value returned.

Second Method:

var selectedSession = $('#sessions').find(":selected").text();

This returns the string "". A blank. I have tried both val() and text(). And yes, I know the difference between the two.

EDIT:

Tried all of these methods with no success:

var selectedSession = $('#sessions :selected').text();
var selectedSession = $('#sessions').val();
var selectedSession = $('#sessions option:selected').text();
var selectedSession = $('select#sessions').val();
var selectedSession = $('#sessions')[0].options[$('#sessions')[0].selectedIndex].val();
var selectedSession = document.getElementById("sessions").text(); Returns null

Also, to clarify, the javascript is in an external document (eg. external.js) and The variable is global and not inside any function.

Thanks for the help.

and/or [Get selected text from drop down list (select box) using jQuery](http://stackoverflow.com/q/1643227/218196) — Felix Kling, Apr 13 '14 at 04:15
and/or [JQuery - Get select value](http://stackoverflow.com/q/6706803/218196) — Felix Kling, Apr 13 '14 at 04:15
Also: https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/ — Felix Kling, Apr 13 '14 at 04:16

Gupta · Answer 1 · 2014-04-13T04:45:02.660

1

try this:

to get text of option:

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

to get value of option:

$('select#sessions').val()

edited Apr 13 '14 at 04:45

answered Apr 13 '14 at 04:13

Gupta

73
5

Doesn't work. Check the edit on my main post. – 10100111001 Apr 13 '14 at 04:54

score 0 · Answer 2 · answered Apr 13 '14 at 04:09

0

You can call val() directly on the select

var selectedSession = $('#sessions').val();

The problem with your first method is that you're mixing up jQuery and native DOM methods, there is no options or selectedIndex property on a jQuery object, you'll have to do that on the select element itself. e.g. $('#sessions')[0].options, $('#sessions')[0].selectedIndex

answered Apr 13 '14 at 04:09

Musa

96,336
17
118
137

Doesn't work. Check the edit on my main post. – 10100111001 Apr 13 '14 at 04:56
You're probably trying to get the select before its created. – Musa Apr 13 '14 at 05:08
That could be the possible reason. Do you know how I can make it select after the document is loaded? i want to make this variable global. – 10100111001 Apr 13 '14 at 06:05

Sireesh Yarlagadda · Answer 3 · 2014-04-13T05:00:52.043

0

Try with $('select#sessions').val()

Here val is the value of the property
Here text is the value of the property.


Sample:
For val is '0', text is 'Choose a Session'
For val is 'Awesome' , text is Awesome.


Value represents option value
text represent the value between the tags. 


<select id="sessions">
  <option value="0">Choose a Session</option>
  <option value="Awesome">Awesome</option>
  <option value="test1">test1</option>
  <option value="testing">testing</option>
</select>

edited Apr 13 '14 at 05:00

answered Apr 13 '14 at 04:16

Sireesh Yarlagadda

12,978
3
74
76

Doesn't work. Check the edit on my main post. – 10100111001 Apr 13 '14 at 04:58
.val is added, it should work now. – Sireesh Yarlagadda Apr 13 '14 at 05:01
if you look at my post it tells you that I have already tried that. – 10100111001 Apr 13 '14 at 05:04

jQuery retrieving select option value

3 Answers3