javascript - jQuery Get Selected Option From Dropdown - Stack Overflow

admin管理员组

文章数量:1125559

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>

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>

• javascript
• html
• jquery
• drop-down-menu

Share Improve this question Follow edited Jul 13, 2022 at 12:54 Andy 6,03922 gold badges3131 silver badges5353 bronze badges asked May 18, 2012 at 20:11 William KinaanWilliam Kinaan 28.8k2020 gold badges8888 silver badges122122 bronze badges 10

• 2 could you show the markup of element #aioConceptName – Jorge Commented May 18, 2012 at 20:13
• 2 it's strange because works on this example jsfiddle.net/pAtVP, are you sure that the event it fires in your enviorment? – Jorge Commented May 18, 2012 at 20:30
• 6 possible duplicate of jQuery: Get selected option from dropdown – Kenny Linsky Commented Aug 21, 2013 at 15:54
• 13 A late thought, but .val() won't work unless you set the value attribute on those <option>s, right? – Jacob Valenta Commented Oct 26, 2013 at 16:38
• 9 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 Arshad Commented Feb 8, 2015 at 14:44

 |  Show 5 more comments

38 Answers 38

Sorted by: Reset to default 1 2 Next 2337

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.

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.

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

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

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

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

With JQuery:

1. If you want to get the selected option text, you can use $(select element).text().

   var text = $('#aioConceptName option:selected').text();

2. If you want to get selected option value, you can use $(select element).val().

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

   Make sure to set value attribute in <option> tag, like:

   <select id="aioConceptName">
     <option value="">choose io</option>
     <option value="roma(value)">roma(text)</option>
     <option value="totti(value)">totti(text)</option>
   </select>
   

With this HTML code sample, assuming last option is selected:

1. var text will give you totti(text)
2. var val will give you totti(value)

$(document).on('change','#aioConceptName' ,function(){
  var val = $('#aioConceptName option:selected').val();
  var text = $('#aioConceptName option:selected').text();
  $('.result').text("Select Value = " + val);
  $('.result').append("<br>Select Text = " + text);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="aioConceptName">
 <option value="io(value)">choose io</option>
 <option value="roma(value)">roma(text)</option>
 <option value="totti(value)">totti(text)</option>
</select>

<p class="result"></p>

For good practice you need to use val() to get value of selected options not text().

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

You can use

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

Or

   $("#aioConceptName :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:

A

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

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

B

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:

$("#Status").val(2);

In some cases you might need to fire events:

$("#Status").val(2).change();

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

to find correct selections with jQuery consider multiple selections can be available in html trees and confuse your expected output.

(:selected).val() or (:selected).text() will not work correct on multiple select options. So we keep an array of all selections first like .map() could do and then return the desired argument or text.

The following example illustrates those problems and offers a better approach

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    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();
    });
    console.log(a,b,c,d);
});
</script>

see the different bug prone output in variant a, b compared to correctly working c & d that keep all selections in an array and then return what you look for.

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'))
});

Just this should work:

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

$(function() {
  $('#aioConceptName').on('change', function(event) {
    console.log(event.type + " event with:", $(this).val());
    $(this).prev('input').val($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>

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.

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() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

Straight forward and pretty easy:

Your dropdown

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

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

For get value of tag selected:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

And if you want to get text use this code:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

For Example:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

You can try to debug it this way:

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

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/

You many try this:

var ioConceptName = $('#ioConceptName option:selected').text(); 

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

Here is the simple solution for this issue.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

try to this one

$(document).ready(function() {

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

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

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://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> 
</select>

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

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

1. Use name attribute of the select element.

   <select name="myName"></select>

2. $('select[name=myName]').val()

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

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

var bOK = true;
$('.optKategorien').each(function(index,el){
    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.

Try

aioConceptName.selectedOptions[0].value

let val = aioConceptName.selectedOptions[0].value

console.log('selected value:',val);

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

本文标签：