Get the value of a dropdown in jQuery
JqueryJquery Problem Overview
I have a drop down that has an 'ID, Name' Pair.
Example
Jon Miller
Jim Smith
Jen Morsin
Jon MIller has ID of 101
Jim Smith has ID of 102
Jen Morsin has ID of 103
When I do the followng:
var arNames = $('#Crd').val()
and I select Jon Miller, I get 101. I'd like to get Jon Miller though.
Jquery Solutions
Solution 1 - Jquery
$('#Crd').val()
will give you the selected value of the drop down element. Use this to get the selected options text.
$('#Crd option:selected').text();
Solution 2 - Jquery
The best way is to use:
$("#yourid option:selected").text();
Depending on the requirement, you could also use this way:
var v = $("#yourid").val();
$("#yourid option[value="+v+"]").text()
Solution 3 - Jquery
This has worked for me!
$('#selected-option option:selected').val()
Hope this helps someone!
Solution 4 - Jquery
If you're using a <select>
, .val()
gets the 'value' of the selected <option>
. If it doesn't have a value
, it may fallback to the id
. Put the value you want it to return in the value
attribute of each <option>
Edit: See comments for clarification on what value
actually is (not necessarily equal to the value
attribute).
Solution 5 - Jquery
Try this:
var text = $('#YourDropdownId').find('option:selected').text();
Solution 6 - Jquery
Another option:
$("#<%=dropDownId.ClientID%>").children("option:selected").val();
Solution 7 - Jquery
var sal = $('.selectSal option:selected').eq(0).val();
selectSal
is a class.
Solution 8 - Jquery
As has been pointed out ... in a select
box, the .val()
attribute will give you the value of the selected option. If the selected option does not have a value attribute it will default to the display value of the option (which is what the examples on the jQuery documentation of .val
show.
you want to use .text()
of the selected option:
$('#Crd option:selected').text()
Solution 9 - Jquery
$('.leave_response').on('change', function() {
var responseId = $(this).val();
console.log(responseId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<select class="leave_response" name="leave">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
Solution 10 - Jquery
Pass the id and hold into a variable and pass the variable where ever you want.
> var temp = $('select[name=ID Name]').val();
Solution 11 - Jquery
You can have text value of #Crd in its variable .
$(document).on('click', '#Crd', function () {
var Crd = $( "#Crd option:selected" ).text();
});