How to do this using jQuery - document.getElementById("selectlist").value

Jquery

Jquery Problem Overview


In jQuery, what is the equivalent to document.getElementById("selectlist").value ?

I am trying to get the value of a select list item.

Thanks.

Jquery Solutions


Solution 1 - Jquery

"Equivalent" is the word here

While...

$('#selectlist').val();

...is equivalent to...

document.getElementById("selectlist").value

...it's worth noting that...

$('#selectlist')

...although 'equivalent' is not the same as...

document.getElementById("selectlist")

...as the former returns a jQuery object, not a DOM object.

To get the DOM object(s) from the jQuery one, use the following:

$('#selectlist').get(); //get all DOM objects in the jQuery collection
$('#selectlist').get(0); //get the DOM object in the jQuery collection at index 0
$('#selectlist')[0]; //get the DOM objects in the jQuery collection at index 0

Solution 2 - Jquery

$('#selectlist').val();

Solution 3 - Jquery

Chaos is spot on, though for these sorts of questions you should check out the Jquery Documentation online - it really is quite comprehensive. The feature you are after is called 'jquery selectors'

Generally you do $('#ID').val() - the .afterwards can do a number of things on the element that is returned from the selector. You can also select all of the elements on a certain class and do something to each of them. Check out the documentation for some good examples.

Solution 4 - Jquery

It can be done by three different ways,though all them are nearly the same

Javascript way

document.getElementById('test').value
  

Jquery way

$("#test").val()          
      
$("#test")[0].value             
      
$("#test").get(0).value

Solution 5 - Jquery

For those wondering if jQuery id selectors are slower than document.getElementById, the answer is yes, but not because of the preconception that it searches through the entire DOM looking for an element. jQuery does actually use the native method. It's actually because jQuery uses a regular expression first to separate out strings in the selector to check by, and of course running the constructor:

rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/

Whereas using a DOM element as an argument returns immediately with 'this'.

So this:

$(document.getElementById('blah')).doSomething();

Will always be faster than this:

$('#blah').doSomething();

Solution 6 - Jquery

In some cases of which I can't remember why but $('#selectlist').val() won't always return the correct item value, so I use $('#selectlist option:selected').val() instead.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiontonyfView Question on Stackoverflow
Solution 1 - JqueryJames WisemanView Answer on Stackoverflow
Solution 2 - JqueryChaosPandionView Answer on Stackoverflow
Solution 3 - JqueryRodH257View Answer on Stackoverflow
Solution 4 - JquerysayannayasView Answer on Stackoverflow
Solution 5 - JquerymarksyzmView Answer on Stackoverflow
Solution 6 - JqueryBrett RyanView Answer on Stackoverflow