Which selector do I need to select an option by its text?

Jquery

Jquery Problem Overview


I need to check if a <select> has an option whose text is equal to a specific value.

For example, if there's an <option value="123">abc</option>, I would be looking for "abc".

Is there a selector to do this?

Im looking for something similar to $('#select option[value="123"]'); but for the text.

Jquery Solutions


Solution 1 - Jquery

This could help:

$('#test').find('option[text="B"]').val();

Demo fiddle

This would give you the option with text B and not the ones which has text that contains B.

For recent versions of jQuery the above does not work. As commented by Quandary below, this is what works for jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

Updated fiddle

Solution 2 - Jquery

You can use the :contains() selector to select elements that contain specific text.
For example:

$('#mySelect option:contains(abc)')

To check whether a given <select> element has such an option, use the .has() method:

if (mySelect.has('option:contains(abc)').length)

To find all <select>s that contain such an option, use the :has() selector:

$('select:has(option:contains(abc))')

Solution 3 - Jquery

None of the previous suggestions worked for me in jQuery 1.7.2 because I'm trying to set the selected index of the list based on the value from a textbox, and some text values are contained in multiple options. I ended up using the following:

$('#mySelect option:contains(' + value + ')').each(function(){
	if ($(this).text() == value) {
		$(this).attr('selected', 'selected');
		return false;
	}
	return true;
});

Solution 4 - Jquery

I faced the same issue below is the working code :

$("#test option").filter(function() {
    return $(this).text() =='Ford';
}).prop("selected", true);

Demo : http://jsfiddle.net/YRBrp/83/

Solution 5 - Jquery

This worked for me: $("#test").find("option:contains('abc')");

Solution 6 - Jquery

This is the best method for select text in dropdownlist.

$("#dropdownid option:contains(your selected text)").attr('selected', true);

Solution 7 - Jquery

I tried a few of these things until I got one to work in both Firefox and IE. This is what I came up with.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

another way of writing it in a more readable fasion:

var valofText = $("#my-Select" + " option").filter(function() {
	return this.text == myText
}).val();
$(ElementID).val(valofText);

Pseudocode:

$("#my-Select").val( getValOfText( myText ) );

Solution 8 - Jquery

Use following

$('#select option:contains(ABC)').val();

Solution 9 - Jquery

This work for me

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');

Solution 10 - Jquery

For jquery version 1.10.2 below worked for me

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });

Solution 11 - Jquery

This will work in jQuery 1.6 (note colon before the opening bracket), but fails on the newer releases (1.10 at the time).

$('#mySelect option:[text=abc]")

Solution 12 - Jquery

This works for me:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

The result variable will return the index of the matched text value. Now I will just set it using it's index:

$('#SubjectID').val(result);

Solution 13 - Jquery

That was 10 years ago. Now jquery is EOL, we can use ordinary DOM for this simple job

document.getElementById("SomeSelectId").querySelectorAll("option").forEach(o => o.selected = o.innerText == text);

Solution 14 - Jquery

use prop instead of attr

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).prop('selected', 'selected');
        return false;
    }
    return true;
});

Solution 15 - Jquery

This will also work.

$('#test').find("select option:contains('B')").filter(":selected");

Solution 16 - Jquery

As described in this answer, you can easily create your own selector for hasText. This allows you to find the option with $('#test').find('option:hastText("B")').val();

Here's the hasText method I added:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }

Solution 17 - Jquery

This works for me

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

Thanks for all the posts.

Solution 18 - Jquery

Either you iterate through the options, or put the same text inside another attribute of the option and select with that.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHailwoodView Question on Stackoverflow
Solution 1 - JqueryHari PachuveetilView Answer on Stackoverflow
Solution 2 - JquerySLaksView Answer on Stackoverflow
Solution 3 - JqueryDr. HilariusView Answer on Stackoverflow
Solution 4 - JqueryJaydeep ShilView Answer on Stackoverflow
Solution 5 - JqueryPhillip DennisView Answer on Stackoverflow
Solution 6 - JquerysreejeshView Answer on Stackoverflow
Solution 7 - Jqueryuser2561852View Answer on Stackoverflow
Solution 8 - JqueryDadaso ZanzaneView Answer on Stackoverflow
Solution 9 - JqueryCarlos CastañedaView Answer on Stackoverflow
Solution 10 - JqueryMir Gulam SarwarView Answer on Stackoverflow
Solution 11 - JqueryBartosz FirynView Answer on Stackoverflow
Solution 12 - JqueryWilly David JrView Answer on Stackoverflow
Solution 13 - JqueryalphonsView Answer on Stackoverflow
Solution 14 - JqueryhmirView Answer on Stackoverflow
Solution 15 - JqueryTjcoolView Answer on Stackoverflow
Solution 16 - JquerywbdarbyView Answer on Stackoverflow
Solution 17 - Jqueryjayson.centenoView Answer on Stackoverflow
Solution 18 - JquerydekomoteView Answer on Stackoverflow