jQuery Get Selected Option From Dropdown

javascript jquery html

K Patel

39 1 year ago

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>

Answers { 1 }

K Patel

1 year ago

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.

Ah, okay, you've updated your question with HTML. This answer is now irrelevant. As a matter of fact, .val() should work in your case-- you must have an error elsewhere. – Elliot Bonneville May 18 '12 at 20:17
11
for the val() why not use var conceptVal = $("#aioConceptName option").filter(":selected").val();? – Tester Aug 6 '13 at 21:19
49
How about a simpler var conceptVal = $("#aioConceptName option:selected").val()? – techouseNov 22 '13 at 11:53
3
I still found this helpful for finding the selected option in a select where I've obtained the dropdown previously -- e.g., var mySelect = $('#mySelect'); /* ... more code happens ... */ var selectedText = mySelect.find(':selected').text(); – Charles Wood Jul 10 '14 at 21:34
11
Actually the reason .val() isn't working for him is because he didn't actually give his options a value, which is why he has to use your method to retrieve the selected text, so another fix would've been to change <option>choose io</option> to <option value='choose io'>choose io</option> Although your solution is probably quicker and more practical, I figured I'd state this anyways so he has a better understanding of why it wasn't working for him