Organizational Research By

Surprising Reserch Topic

jquery how to select an option by its text


jquery how to select an option by its text  using -'jquery'

I need to check if a select has an option whose TEXT is a specific value.

Eg <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 text
    

asked Sep 14, 2015 by RayfordWPRr
0 votes
11 views



Related Hot Questions

7 Answers

0 votes

This could help:

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

Demo - http://jsfiddle.net/nmvf6/1/

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

EDIT:

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

answered Sep 14, 2015 by MadKauffman
0 votes

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

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

To check whether a given s that contain such an option, use the :has() selector:

$('select:has(option:contains(abc))')
answered Sep 14, 2015 by ShielaKiserv
0 votes

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;
});
answered Sep 14, 2015 by ChetPiq42208
0 votes

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]")
answered Sep 14, 2015 by FredricRancl
0 votes

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 ) );
answered Sep 14, 2015 by GeorgeMonnie
0 votes

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;
     };
  }
answered Sep 14, 2015 by HayEJO
0 votes

This is my answer

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

if(targetOption) {
     $(options).removeAttr("selected");
     $(dropdown).val($(targetOption).val())
}

Thanks for all the posts.

answered Sep 14, 2015 by Buster90Feqi

...