4

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?

Improve this question
0

5 Answers 5

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Whats the difference between them? And how do we call the one without [0]? And btw this works, thanks so much
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
2

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();
Improve this answer

Comments

2

It's very simple you just use this :

$(".course_list").val();
Improve this answer

Comments

1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.