jQuery Get Selected Option From Dropdown – Dev

The best answers to the question “jQuery Get Selected Option From Dropdown” in the category Dev.

QUESTION:

Usually I use $("#id").val() to return the value of the selected option, but this time it doesn’t work.
The selected tag has the id aioConceptName

html code

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

ANSWER:

Set the values for each of the options

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val() didn’t work because .val() returns the value attribute. To have it work properly, the value attributes must be set on each <option>.

Now you can call $('#aioConceptName').val() instead of all this :selected voodoo being suggested by others.

ANSWER:

For dropdown options you probably want something like this:

var conceptName = $('#aioConceptName').find(":selected").text();

The reason val() doesn’t do the trick is because clicking an option doesn’t change the value of the dropdown–it just adds the :selected property to the selected option which is a child of the dropdown.

ANSWER:

Try this for value…

$("select#id_of_select_element option").filter(":selected").val();

or this for text…

$("select#id_of_select_element option").filter(":selected").text();

ANSWER:

I stumbled across this question and developed a more concise version of Elliot BOnneville’s answer:

var conceptName = $('#aioConceptName :selected').text();

or generically:

$('#id :pseudoclass')

This saves you an extra jQuery call, selects everything in one shot, and is more clear (my opinion).