Get value of selected option using jquery

Question

My question may be stupid, because I am new to web development and I am so confused now.

First part of my question is that, sometimes when I print stuff using console.log(some element), it gives me a giant object with all the listeners but sometimes it just returns a html string merely like this:

<option value="CS 245">CS 245</option>

The way I found some element like above is using selector as follows:

$( ".course_list option:selected" )[0]

I am sorry about my terminology here because I really want to know the difference between the complex object and the object above (also the name of them). I have tried my best to choose my words, but I fail to make it clearer due to lack of experience. If someone understand what I mean please help me edit this question and provide answers, thanks in advance.

Then the second part of my question is that I want to get that "CS 245" string from the above object.I have tried

$( ".course_list option:selected" )[0].val();
$( ".course_list option:selected" )[0].attr("value");
$( ".course_list option:selected" )[0].text();

but all of them give me this error:

Uncaught TypeError: undefined is not a function

I have included jquery and there is no other crash/file_not_found shown in console. I am using latest bootstrap and formstone selecter, but I am not sure how that affects me here.

Can anybody help?

score 4 · Accepted Answer · edited May 23 '17 at 11:51

4

You don't need to convert it to ~~javascript object~~ raw DOM Element, just do this:

$( ".course_list option:selected" ).val()

When you do $( ".course_list option:selected" )[0] you are getting raw DOM Element it is not a jquery object so call val() on it will give you error.

With DOM element you can try it like this:

$( ".course_list option:selected" )[0].getAttribute("value")

For more understanding you can refer this SO Post

edited May 23 '17 at 11:51

Community

1
1

answered Nov 12 '14 at 06:30

Ehsan Sajjad

61,834
16
105
160

Whats the difference between them? And how do we call the one without [0]? And btw this works, thanks so much – user1741485 Nov 12 '14 at 06:32
when you do `$( ".course_list option:selected" )[0]` you have javascript element object anb you can javascript properties on it but when you do $( ".course_list option:selected" ) it is a jquery object and you can call jquery function on it – Ehsan Sajjad Nov 12 '14 at 06:35

score 2 · Answer 2 · answered Nov 12 '14 at 06:33

2

It's very simple you just use this :

$(".course_list").val();

answered Nov 12 '14 at 06:33

kupendra

1,002
1
15
37

score 1 · Answer 3 · answered Nov 12 '14 at 06:30

Just get the select and execute the val method:

$('.course_list').val();

$(function () {
  $('#get').on('click', function () {
    var value = $('.course_list').val();
    alert(value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="course_list">
  <option value="1">Item 1</option>  
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
</select>

<input type="button" value="Get Value" id="get" />

score 1 · Answer 4 · answered Nov 12 '14 at 06:31

You can get it in proper way. Below will definitely helps you.

<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>

// To Get Text
$("#myselect option:selected").text();

// To Get Value
$("#myselect option:selected").val();

score 0 · Answer 5 · answered Nov 12 '14 at 06:31

Use:

$(".course_list").val()

The value of the <select> is the value of the selected option.

You don't need to use [0]. You use that when you want to get the DOM element that the jQuery object contains, so that you can call ordinary DOM methods on it instead of jQuery methods. E.g. you could write:

$(".course_list")[0].value

because .value is a DOM property.

Get value of selected option using jquery

5 Answers5