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

<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
  • 1
    could you show the markup of element #aioConceptName – Jorge May 18 '12 at 20:13
  • 1
    it's strange because works on this example jsfiddle.net/pAtVP, are you sure that the event it fires in your enviorment? – Jorge May 18 '12 at 20:30
  • 4
    possible duplicate of jQuery: Get selected option from dropdown – Kenny Linsky Aug 21 '13 at 15:54
  • 10
    A late thought, but .val() won't work unless you set the value attribute on those <option>s, right? – Jacob Valenta Oct 26 '13 at 16:38
  • 7
    Recent versions of jQuery (tested with 1.9.1) have no issues with this markup. For the above example, $("#aioConceptName").val() returns choose io. – Salman A Feb 8 '15 at 14:44

29 Answers 29


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.

  • 40
    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
  • 12
    for the val() why not use var conceptVal = $("#aioConceptName option").filter(":selected").val();? – Tester Aug 6 '13 at 21:19
  • 59
    How about a simpler var conceptVal = $("#aioConceptName option:selected").val()? – techouse Nov 22 '13 at 11:53
  • 4
    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
  • 15
    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. – Jordan LaPrise Mar 23 '16 at 23:14

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>

$('#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.

  • 10
    Caveat: if no option is selected, $('#aioConceptName').val() returns null/"undefined" – gordon Feb 24 '14 at 18:47
  • This assured me that $('#myselect').val() was correct I'd just dumbly forgotten to give the select an id! – zzapper Jun 30 '14 at 17:19
  • 4
    One of my select options is a special prompt option <option>Please select an option</option>. In my case it wasn't a problem to add a blank value attribute <option value="">Please...</option> but I believe in some cases not having a value attribute makes sense. But +1 because your vodoo wording made me smile. – Cyril Duchon-Doris Apr 11 '16 at 22:31
  • Isn't val() select the value instead of the text inside the option? I.e. it selects 1 instead of roma. – deathlock Oct 29 '17 at 17:31
  • 4
    @deathlock That's the whole point of .val(). If you are looking to manipulate/use the text, use $(":selected).text() or set the value and the text to be the same. – Jacob Valenta Oct 29 '17 at 19:41

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

  • 1
    @JohnConde The accepted answer on Meta disagrees with you: meta.stackexchange.com/questions/87678/… . In my opinion, Ed has given a good answer and just provided some extra reference. – itsbruce Nov 1 '12 at 17:38
  • They can allow it but it's still a bad resource – John Conde Nov 1 '12 at 17:41
  • 1
    Removed the w3schools link, it wasn't strictly necessary and a Google search for "jQuery pseduo classes" provides plenty of information. – Ed Orsi Nov 1 '12 at 17:45
  • @EdOrsi: While it saves an extra jQuery call, it prevents from taking taking advantage of the performance boost provided by the native DOM querySelectorAll() method (see jQuery docs). So, it should be slower than the Eliot's solution. – Alexander Abakumov Nov 30 '15 at 14:56
  • I'd probably favor using .find(':selected') as then it allows you do call it from a callback attached to an event... like $('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); }); – Armstrongest Dec 9 '17 at 6:08

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

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


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

  • 2
    Flawless! Just do not forget you should add $(this).find('option:selected').val() at the end to get the value of the option element, or $(this).find('option:selected').text() to get the text. :) – PossessWithin May 12 '17 at 15:45

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

$('#aioConceptName option:selected').val();

Reading the value (not the text) of a select:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

How to disable a select? in both variants, value can be changed using:


User can not interact with the dropdown. And he doesn't know what other options might exists.

$('#Status').prop('disabled', true);


User can see the options in the dropdown but all of them are disabled:

$('#Status option').attr('disabled', true);

In this case, $("#Status").val() will only work for jQuery versions smaller than 1.9.0. All other variants will work.

How to update a disabled select?

From code behind you can still update the value in your select. It is disabled only for users:


In some cases you might need to fire events:

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
  • :) the nice thing is :selected.. val() or text() is not working correct on multiple select options, only if some array is produced out of it like map() could do. – Ol Sen Apr 26 '13 at 20:19

you should use this syntax:

var value = $('#Id :selected').val();

So try this Code:

var values = $('#aioConceptName :selected').val();

you can test in Fiddle: http://jsfiddle.net/PJT6r/9/

see about this answer in this post


Using jQuery, just add a change event and get selected value or text within that handler.

If you need selected text, please use this code:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())

Or if you need selected value, please use this code:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))

Use the jQuery.val() function for select elements, too:

The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of select elements, it returns null when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the multiple attribute is present.

$(function() {
  $("#aioConceptName").on("change", function() {
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
<div id="debug"></div>


For anyone who found out that best answer don't work.

Try to use:

  $( "#aioConceptName option:selected" ).attr("value");

Works for me in recent projects so it is worth to look on it.


Just this should work:

var conceptName = $('#aioConceptName').val();

Straight forward and pretty easy:

Your dropdown

<select id="aioConceptName">
    <option>choose io</option>

Jquery code to get the selected value

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.

You can try to debug it this way:

console.log($('#aioConceptName option:selected').val())

use this pattern (syntax):

var value = $('#Id :selected').val();

So replace your variables and try this Code:

var values = $('#aioConceptName :selected').val();

then Enjoy it!


If you want to grab the 'value' attribute instead of the text node, this will work for you:

var conceptName = $('#aioConceptName').find(":selected").attr('value');
  • This is only partially a solution - it is also necessary to set the value for each option - this is already covered by Jacob Valetta's answer – David Oct 27 '16 at 0:42

I hope this also helps to understand better and helps try this below, $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
to more details please http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/


try to this one

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

to use $("#id").val, You should add a value to the option like this :

<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>

else, You can use


I wish that helps ..


For get value of tag selected:


And if you want to get text use this code:


For Example => i have this tag selected :

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Imagine the DDL as an array with indexes, you are selecting one index. Choose the one which you want to set it to with your JS.

  • # is forgot! => $('#nameofDropDownList'). ..... – D.L.MAN Oct 27 at 18:41

Probably your best bet with this kind of scenario is to use jQuery's change method to find the currently selected value, like so:


   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var


I prefer this method because you can then perform functions for each selected option in a given select field.

Hope that helps!


You can use $("#drpList").val();

  • 3
    You were right; however, he related to the text, the question is wrong. – Federico Navarrete Jan 23 '18 at 10:47

Usually you'd need to not only get the selected value, but also run some action. So why not avoid all the jQuery magic and just pass the selected value as an argument to the action call?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />

You can select using exact selected option : Below will give innerText

$("select#aioConceptName > option:selected").text()

While below will give you value.

$("select#aioConceptName > option:selected").val()

to fetch a select with same class= name you could do this, to check if a select option is selected.

var bOK = true;
    if($(el).find(":selected").text() == "") {
        bOK = false;

I had the same issue and I figured out why it was not working on my case
The html page was divided into different html fragments and I found that I have another input field that carries the same Id of the select, which caused the val() to be always empty
I hope this saves the day for anyone who have similar issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.