How can I get the selected value of a dropdown box using jQuery?
I tried using
var value = $('#dropDownId').val();
and
var value = $('select#dropDownId option:selected').val();
but both return an empty string.
This question is related to
jquery
Try this jQuery,
$("#ddlid option:selected").text();
or this javascript,
var selID=document.getElementById("ddlid");
var text=selID.options[selID.selectedIndex].text;
If you need to access the value and not the text then try using val() method instead of text().
Check out the below fiddle links.
try this
$("#yourDropdown option:selected").text();
Or if you would try :
$("#foo").find("select[name=bar]").val();
I used It today and It working fine.
This will alert the selected value. JQuery Code...
$(document).ready(function () {
$("#myDropDown").change(function (event) {
alert("You have Selected :: "+$(this).val());
});
});
HTML Code...
<select id="myDropDown">
<option>Milk</option>
<option>Egg</option>
<option>Bread</option>
<option>Fruits</option>
</select>
use either of these codes
$('#dropDownId :selected').text();
OR
$('#dropDownId').text();
To get the jquery value from drop down you just use below function just sent id and get the selected value:
function getValue(id){
var value = "";
if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
for(var i=0;i<$('#'+id)[0].length;i++){
if($('#'+id)[0][i].selected == true){
if(value != ""){
value = value + ", ";
}
value = value + $('#'+id)[0][i].innerText;
}
}
}
return value;
}
$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);
<p class="inline-large-label button-height ParentClass" >
<label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
<asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">
</asp:DropDownList>
</p>
function fundrp(){_x000D_
var text_value = $("#drpboxid option:selected").text(); _x000D_
console.log(text_value);_x000D_
var val_text = $("#drpboxid option:selected").val(); _x000D_
console.log(val_text);_x000D_
var value_text = $("#drpboxid option:selected").attr("vlaue") ;_x000D_
console.log(value_text);_x000D_
var get_att_value = $("#drpboxid option:selected").attr("id") _x000D_
console.log(get_att_value);_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>_x000D_
<select id="drpboxid">_x000D_
<option id="1_one" vlaue="one">one</option>_x000D_
<option id="2_two" vlaue="two">two</option>_x000D_
<option id="3_three" vlaue="three">three</option> _x000D_
</select>_x000D_
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>$("select[id$=dropDownId]").val()
this will do the trick
$('#dropDownId').val();
I know this is old but I though I update this with an more up to date answer
$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
alert(prepMin);
});
I hope this helps
The id that got generated for your drop down control in the html will be dynamic one. So use the complete id $('ct100_<Your control id>').val(). It will work.
You need to put like this.
$('[id$=dropDownId] option:selected').val();
I know this is a terribly old post and I should probably be flogged for this pitiful resurrection, but I thought I would share a couple of VERY helpful little JS snippets that I use throughout every application in my arsenal...
If typing out:
$("#selector option:selected").val() // or
$("#selector option:selected").text()
is getting old, try adding these little crumpets to your global *.js file:
function soval(a) {
return $('option:selected', a).val();
}
function sotext(a) {
return $('option:selected', a).text();
}
and just write soval("#selector"); or sotext("#selector"); instead! Get even fancier by combining the two and returning an object containing both the value and the text!
function so(a) {
my.value = $('option:selected', a).val();
my.text = $('option:selected', a).text();
return my;
}
It saves me a ton of precious time, especially on form-heavy applications!
Did you supply your select-element with an id?
<select id='dropDownId'> ...
Your first statement should work!
You can use any of these:
$(document).on('change', 'select#dropDownId', function(){
var value = $('select#dropDownId option:selected').text();
//OR
var value = $(this).val();
});
Yet another tested example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
alert($("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
This is what works
var value= $('option:selected', $('#dropDownId')).val();
Try this:
$('#dropDownId option').filter(':selected').text();
$('#dropDownId option').filter(':selected').val();
$("#selector <b>></b> option:selected").val()
Or
$("#selector <b>></b> option:selected").text()
Above codes worked well for me
use
$('#dropDownId').find('option:selected').val()
This should work :)
For selected text use:
value: $('#dropDownId :selected').text();
For selected value use:
value: $('#dropDownId').val();
Use the method below to get the selected value on page load:
$(document).ready(function () {
$('#ddlid').on('change', function () {
var value = $('#ddlid :selected').text();
alert(value);`
});
});
If you have more than one dropdown try:
HTML:
<select id="dropdown1" onchange="myFunction(this)">
<option value='...'>Option1
<option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
<option value='...'>Option1
<option value='...'>Option2
</select>
JavaScript:
function myFunction(sel) {
var selected = sel.value;
}
Try this, it gets the value:
$('select#myField').find('option:selected').val();
You can do this by using following code.
$('#dropDownId').val();
If you want to get the selected value from the select list`s options. This will do the trick.
$('#dropDownId option:selected').text();
HTML:
<select class="form-control" id="SecondSelect">
<option>5<option>
<option>10<option>
<option>20<option>
<option>30<option>
</select>
JavaScript:
var value = $('#SecondSelect')[0].value;
var value = $('#dropDownId:selected').text()
Should work fine, see this example:
$(document).ready(function(){ _x000D_
$('#button1').click(function(){ _x000D_
alert($('#combo :selected').text());_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select id="combo">_x000D_
<option value="1">Test 1</option>_x000D_
<option value="2">Test 2</option>_x000D_
</select>_x000D_
<input id="button1" type="button" value="Click!" />For Normal Page loaded dropdowns
$("#dropDownId").on('change',function(){
var value=$(this).val();
alert(value);
});
for dynamically added options Make sure to keep the id unique
$(document).on('change','#dropDownId',function(){
var value=$(this).val();
alert(value)
});
Source: Stackoverflow.com