jQuery Get Selected Option From Dropdown

For dropdown options you probably want something like this:

For selected text

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

For selected value

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

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.

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).

Set the values for each of the options

<label for="aioConceptName">AIO Concept Name</label>
<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.