jQuery Get Selected Option From Dropdown

jQuery Get Selected Option From Dropdown

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


Solutions/Answers:

Solution 1:

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.

Solution 2:

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.

Solution 3:

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

Solution 4:

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();

Solution 5:

If you are in event context, in jQuery, you can retrieve the selected option element using :
$(this).find('option:selected') like this :

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

Edit

As mentioned by PossessWithin, My answer just answer to the question : How to select selected “Option”.

Next, to get the option value, use option.val().

Solution 6:

Have you considered using plain old javascript?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

See also Getting an option text/value with JavaScript