Get selected text from a drop-down list (select box) using jQuery
JavascriptJqueryDomDrop Down-MenuJquery SelectorsJavascript Problem Overview
How can I get the selected text (not the selected value) from a drop-down list in jQuery?
Javascript Solutions
Solution 1 - Javascript
$("#yourdropdownid option:selected").text();
Solution 2 - Javascript
Try this:
$("#myselect :selected").text();
For an ASP.NET dropdown you can use the following selector:
$("[id*='MyDropDownId'] :selected")
Solution 3 - Javascript
The answers posted here, for example,
$('#yourdropdownid option:selected').text();
didn't work for me, but this did:
$('#yourdropdownid').find('option:selected').text();
It is possibly an older version of jQuery.
Solution 4 - Javascript
If you already have the dropdownlist available in a variable, this is what works for me:
$("option:selected", myVar).text()
The other answers on this question helped me, but ultimately the jQuery forum thread $(this + "option:selected").attr("rel") option selected is not working in IE helped the most.
Update: fixed the above link
Solution 5 - Javascript
This works for me
$("#dropdownid").change(function() {
alert($(this).find("option:selected").text());
});
If the element created dynamically
$(document).on("change", "#dropdownid", function() {
alert($(this).find("option:selected").text());
});
Solution 6 - Javascript
$("option:selected", $("#TipoRecorde")).text()
Solution 7 - Javascript
Solution 8 - Javascript
$("#DropDownID").val() will give the selected index value.
Solution 9 - Javascript
For the text of the selected item, use:
$('select[name="thegivenname"] option:selected').text();
For the value of the selected item, use:
$('select[name="thegivenname"] option:selected').val();
Solution 10 - Javascript
Use this
const select = document.getElementById("yourSelectId");
const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;
Then you get your selected value and text inside selectedValue and selectedText.
Solution 11 - Javascript
Various ways
1. $("#myselect option:selected").text();
2. $("#myselect :selected").text();
3. $("#myselect").children(":selected").text();
4. $("#myselect").find(":selected").text();
Solution 12 - Javascript
$("#dropdownID").change(function(){
alert($('option:selected', $(this)).text());
});
Solution 13 - Javascript
var someName = "Test";
$("#<%= ddltest.ClientID %>").each(function () {
$('option', this).each(function () {
if ($(this).text().toLowerCase() == someName) {
$(this).attr('selected', 'selected')
};
});
});
That will help you to get right direction. Above code is fully tested if you need further help let me know.
Solution 14 - Javascript
For those who are using SharePoint lists and don't want to use the long generated id, this will work:
var e = $('select[title="IntenalFieldName"] option:selected').text();
Solution 15 - Javascript
$("#selectID option:selected").text();
Instead of #selectID you can use any jQuery selector, like .selectClass using class.
As mentioned in the documentation here.
The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them.
.text() As per the documentation here.
Get the combined text contents of each element in the set of matched elements, including their descendants.
So you can take text from any HTML element using the .text() method.
Refer the documentation for a deeper explanation.
Solution 16 - Javascript
$("select[id=yourDropdownid] option:selected").text()
This works fine
Solution 17 - Javascript
$('#id').find('option:selected').text();
Solution 18 - Javascript
For getting selected value use
$('#dropDownId').val();
and for getting selected item text use this line:
$("#dropDownId option:selected").text();
Solution 19 - Javascript
This code worked for me.
$("#yourdropdownid").children("option").filter(":selected").text();
Solution 20 - Javascript
Select Text and selected value on dropdown/select change event in jQuery
$("#yourdropdownid").change(function() {
console.log($("option:selected", this).text()); //text
console.log($(this).val()); //value
})
Solution 21 - Javascript
Try:
$var = jQuery("#dropdownid option:selected").val();
alert ($var);
Or to get the text of the option, use text():
$var = jQuery("#dropdownid option:selected").text();
alert ($var);
More Info:
Solution 22 - Javascript
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
Solution 23 - Javascript
Simply try the following code.
var text= $('#yourslectbox').find(":selected").text();
it returns the text of the selected option.
Solution 24 - Javascript
Use:
('#yourdropdownid').find(':selected').text();
Solution 25 - Javascript
the following worked for me:
$.trim($('#dropdownId option:selected').html())
Solution 26 - Javascript
In sibling case
<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
<option value="">Select Client name....</option>
<option value="1">abc</option>
</select>
/*jQuery*/
$(this).siblings('select').children(':selected').text()
Solution 27 - Javascript
This work for me:
$("#city :selected").text();
I'm using jQuery 1.10.2
Solution 28 - Javascript
$(function () {
alert('.val() = ' + $('#selectnumber').val() + ' AND html() = ' + $('#selectnumber option:selected').html() + ' AND .text() = ' + $('#selectnumber option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="selectnumber">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
</form>
</body>
</html>
Solution 29 - Javascript
$("#dropdown").find(":selected").text();
$("#dropdown :selected").text();
$("#dropdown option:selected").text();
$("#dropdown").children(":selected").text();
Solution 30 - Javascript
If you want the result as a list, then use:
x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})
Solution 31 - Javascript
Try
dropdown.selectedOptions[0].text
function read() {
console.log( dropdown.selectedOptions[0].text );
}
<select id="dropdown">
<option value="1">First</option>
<option value="2">Second</option>
</select>
<button onclick="read()">read</button>
Solution 32 - Javascript
For multi-selects:
$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
Solution 33 - Javascript
$("#dropdownid option:selected").text();
if you use asp.net and write
<Asp:dropdownlist id="ddl" runat="Server" />
then you should use
$('#<%=ddl.Clientid%> option:selected').text();
Solution 34 - Javascript
Just add the below line
$(this).prop('selected', true);
replaced .att to .prop it worked for all browsers.
Solution 35 - Javascript
$("#dropdownid").change(function(el) {
console.log(el.value);
});
Or you can use this
$("#dropdownid").change(function() {
console.log($(this).val());
});