Search code examples
javascripthtmljquerydrop-down-menu

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

<label for="name">Name</label>
<input type="text" name="name" id="name" />

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>
Solution

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