Reputation: 28819
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>
Upvotes: 1439
Views: 2402446
Reputation: 221
you can try with
const thuongHieuElement = document.getElementById('thuongHieu');
const thuongHieuText = thuongHieuElement.options[thuongHieuElement.selectedIndex].text;
Upvotes: 0
Reputation: 115
Simply you can use this.
$('#aioConceptName').find('option:selected')
Upvotes: 2
Reputation: 341
Use name attribute of the select element.
<select name="myName"></select>
$('select[name=myName]').val()
Upvotes: 3
Reputation: 51
You many try this:
var ioConceptName = $('#ioConceptName option:selected').text();
Upvotes: 5
Reputation: 53361
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.
Upvotes: 2343
Reputation: 6769
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.
Upvotes: 432
Reputation: 4255
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>
Upvotes: 13
Reputation: 1761
With JQuery:
If you want to get the selected option text, you can use $(select element).text()
.
var text = $('#aioConceptName option:selected').text();
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:
totti(text)
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>
Upvotes: 21
Reputation: 3368
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.
Upvotes: 14
Reputation: 236
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();
Upvotes: 20
Reputation: 21
There is only one correct way to find selected option - by option
value
attribute. So take the simple code:
//find selected option
$select = $("#mySelect");
$selectedOption = $select.find( "option[value=" + $select.val() + "]" );
//get selected option text
console.log( $selectedOption.text() );
So if you have list like this:
<select id="#mySelect" >
<option value="value1" >First option</option>
<option value="value2" >Second option</option>
<option value="value3" selected >Third option</option>
</select>
If you use selected
attribute for option
, then find(":selected")
will give incorrect result because selected
attribute will stay at option
forever, even user selects another option.
Even if user will selects first or second option, the result of $("select option:selected") will give two elements! So $("select :selected").text() will give a result like "First option Third option"
So use value
attribute selector and don't forget to set value
attribute for all options!
Upvotes: 2
Reputation: 878
try this code: :)
get value:
$("#Ostans option:selected").val() + '.' + $("#shahrha option:selected").val()
get text:
$("#Ostans option:selected").text() + '.' + $("#shahrha option:selected").text()
Upvotes: 1
Reputation: 92687
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>
Upvotes: 2
Reputation: 2006
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>
Upvotes: 10
Reputation: 969
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/
Upvotes: 5
Reputation: 195
Here is the simple solution for this issue.
$("select#aioConceptName").change(function () {
var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
console.log(selectedaioConceptName);
});
Upvotes: 4
Reputation: 31
$('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.
Upvotes: 3
Reputation: 1140
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.
Upvotes: 2
Reputation: 413
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.
});
Upvotes: 10
Reputation: 1093
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
Upvotes: 15
Reputation: 319
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;
}
});
Upvotes: 2
Reputation: 97
You can try to debug it this way:
console.log($('#aioConceptName option:selected').val())
Upvotes: 5
Reputation: 2676
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()
Upvotes: 1
Reputation: 5232
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 ... />
</select>
Upvotes: 1
Reputation: 167
Probably your best bet with this kind of scenario is to use jQuery's change method to find the currently selected value, like so:
$('#aioConceptName').change(function(){
//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!
Upvotes: 1
Reputation: 33
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">
Upvotes: 3
Reputation: 2840
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();
Upvotes: 18
Reputation: 6873
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()
.
Upvotes: 68