How can I get the selected text (not the selected value) from a drop-down list in jQuery?
This question is related to
javascript
jquery
dom
drop-down-menu
jquery-selectors
For multi-selects:
$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
If you want the result as a list, then use:
x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})
$(function () {_x000D_
alert('.val() = ' + $('#selectnumber').val() + ' AND html() = ' + $('#selectnumber option:selected').html() + ' AND .text() = ' + $('#selectnumber option:selected').text());_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head runat="server">_x000D_
<title></title>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
<form id="form1" runat="server">_x000D_
<div>_x000D_
<select id="selectnumber">_x000D_
<option value="1">one</option>_x000D_
<option value="2">two</option>_x000D_
<option value="3">three</option>_x000D_
<option value="4">four</option>_x000D_
</select>_x000D_
_x000D_
</div>_x000D_
</form>_x000D_
</body>_x000D_
</html>
_x000D_
the following worked for me:
$.trim($('#dropdownId option:selected').html())
Various ways
1. $("#myselect option:selected").text();
2. $("#myselect :selected").text();
3. $("#myselect").children(":selected").text();
4. $("#myselect").find(":selected").text();
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());
});
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()
$("select[id=yourDropdownid] option:selected").text()
This works fine
This work for me:
$("#city :selected").text();
I'm using jQuery 1.10.2
$("#dropdown").find(":selected").text();
$("#dropdown :selected").text();
$("#dropdown option:selected").text();
$("#dropdown").children(":selected").text();
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
.
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
})
This code worked for me.
$("#yourdropdownid").children("option").filter(":selected").text();
Just add the below line
$(this).prop('selected', true);
replaced .att to .prop it worked for all browsers.
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();
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.
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.
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
$("#dropdownID").change(function(){
alert($('option:selected', $(this)).text());
});
Try this:
$("#myselect :selected").text();
For an ASP.NET dropdown you can use the following selector:
$("[id*='MyDropDownId'] :selected")
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:
$("#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();
Try
dropdown.selectedOptions[0].text
function read() {_x000D_
console.log( dropdown.selectedOptions[0].text );_x000D_
}
_x000D_
<select id="dropdown">_x000D_
<option value="1">First</option>_x000D_
<option value="2">Second</option>_x000D_
</select>_x000D_
<button onclick="read()">read</button>
_x000D_
$("#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.
Use:
('#yourdropdownid').find(':selected').text();
$('#id').find('option:selected').text();
$("option:selected", $("#TipoRecorde")).text()
For getting selected value use
$('#dropDownId').val();
and for getting selected item text use this line:
$("#dropDownId option:selected").text();
Simply try the following code.
var text= $('#yourslectbox').find(":selected").text();
it returns the text of the selected option.
$("#DropDownID").val()
will give the selected index value.
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
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();
Source: Stackoverflow.com