[abctest483]

How can I get the selected text (not the selected value) from a drop-down list in jQuery?

[zarni]

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.

[abctest483]

$("option:selected", $("#TipoRecorde")).text()

[abctest483]

$("#DropDownID").val() will give the selected index value.

[abctest483]

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();

[abctest483]

$("select[id=yourDropdownid] option:selected").text()

This works fine

[abctest483]

This works for me:

$('#yourdropdownid').find('option:selected').text();

jQuery version: 1.9.1

[abctest483]

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();

[abctest483]

 $("#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.

[Anonymous]

$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

[abctest483]

Use:

('#yourdropdownid').find(':selected').text();

[abctest483]

Various ways

1. $("#myselect option:selected").text();

2. $("#myselect :selected").text();

3. $("#myselect").children(":selected").text();

4. $("#myselect").find(":selected").text();

[abctest483]

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()

[abctest483]

$('#id').find('option:selected').text();

[abctest483]

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.

[Author]

Posts