jQuery: Setting select list 'selected' based on text, failing strangely

Question

I have been using the following code (with jQuery v1.4.2) to set the 'selected' attribute of a select list based on its 'text' description rather than its 'value':

$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;

This code worked fine, until I noticed one select list on which it failed, depending on the text that was being matched. After some hair-pulling I realized that it was failing only in cases where the text was a single word (no spaces, no non-alpha characters). (All of my previous uses of this code had worked fine with select lists comprised solely of multi-word chemical names.)

For example, within the one select list, it worked fine with:
pharbitic acid
25-D-spirosta-3,5-diene
pogostol (#Pogostemon#)

It failed with:
glucose
adenine

I have tried any way I could think of to surround the text variable with quotes (both single and double) to no avail. (But why should a single word need quotes when a two word phrase does not?)

I have tried hard coding the text in there and had the same result.

This works:

$("#constituent option[text=#a#-allocryptopine]").attr('selected', 'selected');

This works:

$("#constituent option[text=5-O-methylrisanrinol]").attr('selected', 'selected');

This did not work:

$("#constituent option[text=adenine]").attr('selected', 'selected');

I tried hard coding quotes. This did not work:

$("#constituent option[text='glucose']").attr('selected', 'selected');

I could not get hard coded quotes (single or double) to work with any text at all.

It's worth noting that quotes are acceptable when using the 'value' attribute. E.g., both of these work fine:

$("#constituent option[value='3']").attr('selected', 'selected');

$("#constituent option[value=3]").attr('selected', 'selected');

Below is some code to demonstrate the problem. Two select lists, the first of which is comprised of simple words, the second of two word phrases. When the page loads it tries to set the value of each select list. The jQuery code works for the second list but not the first. (I tried putting a space in 'monkey' to get 'mon key' and it worked!)

A working demo of the code below is here.

I would greatly appreciate any insight into what I am doing wrong here. Or even an alternative selector syntax for using the 'text' attribute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head>
    
  <script type="text/javascript" src="../js/jquery/jquery.js"></script>
    
  <script type="text/javascript">
    
  $(document).ready(function(){

    var text1 = 'Monkey';
    $("#mySelect1 option[text=" + text1 + "]").attr('selected', 'selected');
        
    var text2 = 'Mushroom pie';
    $("#mySelect2 option[text=" + text2 + "]").attr('selected', 'selected');        
    
  });
    
  </script> 

</head>

<body>

  <select id="mySelect1">
    <option></option>
    <option>Banana</option>
    <option>Monkey</option>
    <option>Fritter</option>
  </select> 

  <select id="mySelect2">
    <option></option>
    <option>Cream cheese</option>
    <option>Mushroom pie</option>
    <option>French toast</option>
  </select> 

</body>

</html>

Is there a reason you cannot simply set the selected index of the list? Selecting based on the text value isn't really the best way to do this. — casablanca
– casablanca, Commented Sep 5, 2010 at 0:17
I get your point, but I don't know the index value at the time. Basically I build a table of data from a database, the user can edit a row by clicking on it and a number of select lists below are filled with the values from the table (this is what I use the code above for). Different values can be selected from one or more lists, then the database and table are updated using $.ajax. The select list index values are id values from the database tables. In theory I could store these invisibly in the table along with the text descriptions but I am trying to cut down on overhead where possible. — Stuart Allen
– Stuart Allen, Commented Sep 5, 2010 at 0:30

Nick Craver · Accepted Answer · 2010-09-05 00:22:39Z

118

When an <option> isn't given a value="", the text becomes its value, so you can just use .val() on the <select> to set by value, like this:

var text1 = 'Monkey';
$("#mySelect1").val(text1);

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);

You can test it out here, if the example is not what you're after and they actually have a value, use the <option> element's .text property to .filter(), like this:

var text1 = 'Monkey';
$("#mySelect1 option").filter(function() {
    return this.text == text1; 
}).attr('selected', true);

var text2 = 'Mushroom pie';
$("#mySelect2 option").filter(function() {
    return this.text == text2; 
}).attr('selected', true);

You can test that version here.

edited Sep 5, 2010 at 0:22

answered Sep 5, 2010 at 0:17

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Stuart Allen Over a year ago

Thanks so much for your quick response. Just what I was after. (I do in fact have values set in the actual code.) I'd still be very much interested if anyone has any idea why my original code seemed to fail as it did in particular circumstances...

Nick Craver Over a year ago

@Snubian - was the casing and such correct? The match will be case-sensitive

Stuart Allen Over a year ago

I'm positive that the casing was fine, the code was failing only in very specific circumstances as I've tried to describe. And I've tested with hard-coding values as described above. The failure of the "Monkey" example in my test code seems to indicate that this usage fails in certain cases. Running the code on jsFiddle, you can see if you simply put a space in "Mon key", both the text1 variable and in the list option, it suddenly works.

Dylan Valade Over a year ago

+1 I needed to match the option value instead of the label text. It is achieved with return this.val() == text2;

Mark Amery Over a year ago

Modern readers should note that this answer is out of date; using .attr('selected', true); will fail in jQuery 1.9+ and has been deprecated since jQuery 1.6. You should use .prop('selected', true) instead. See stackoverflow.com/a/496126/1709587

|

Deivide · Accepted Answer · 2019-11-07 13:37:25Z

27

$("#my-select option:contains(" + myText +")").attr("selected", true);

This returns the first option containing your text description.

edited Nov 7, 2019 at 13:37

answered Mar 31, 2015 at 21:20

Deivide

5438 silver badges16 bronze badges

3 Comments

christopher johnson mccandless Over a year ago

this seems not working for the second time. to fix for the second time i used prop ie $("#my-select option:contains(Thrissur)").prop("selected", true);

christopher johnson mccandless Over a year ago

jsfiddle.net/0Lj97wus

Deivide Over a year ago

@christopherjohnsonmccandless It may be related to the jQuery version. My post was in 2015.

ScottE · Accepted Answer · 2010-09-05 00:06:34Z

15

try this:

$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);

answered Sep 5, 2010 at 0:06

ScottE

21.6k19 gold badges97 silver badges131 bronze badges

Comments

wsanville · Accepted Answer · 2010-09-05 00:10:10Z

4

Using the filter() function seems to work in your test cases (tested in Firefox). The selector would look like this:

$('#mySelect1 option').filter(function () {
    return $(this).text() === 'Banana';
});

answered Sep 5, 2010 at 0:10

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

Comments

Ly Thanh Ngo · Accepted Answer · 2018-05-17 01:13:54Z

3

I usually use:

$("#my-Select option[text='" + myText +"']").attr("selected","selected") ;

answered May 17, 2018 at 1:13

Ly Thanh Ngo

4761 gold badge3 silver badges16 bronze badges

1 Comment

Bharat Vasant Over a year ago

This seemd to be working and I upvoted, but its not working !!

chepe263 · Accepted Answer · 2012-04-27 18:25:40Z

2

In case someone google for this, the solutions above didn't work for me so i ended using "pure" javascript

document.getElementById("The id of the element").value = "The value"

And that would set the value and make the current value selected in the combo box. Tested in firefox.

it was easier than keep googling a solution for jQuery

answered Apr 27, 2012 at 18:25

chepe263

2,81224 silver badges39 bronze badges

Comments

CoolBeans · Accepted Answer · 2011-10-02 00:07:48Z

1

The following works for text entries both with and without spaces:

$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);

edited Oct 2, 2011 at 0:07

CoolBeans

20.9k10 gold badges88 silver badges102 bronze badges

answered Dec 29, 2010 at 21:38

Matt

111 bronze badge

Comments

user2561852 · Accepted Answer · 2014-12-05 22:12:54Z

0

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 Dec 5, 2014 at 22:12

user2561852

971 silver badge3 bronze badges

1 Comment

Heretic Monkey Over a year ago

This answer does not seem to differ in any appreciable way from the other answers, including the accepted answer, which is much more succinct.

maxhb · Accepted Answer · 2016-02-10 10:21:18Z

0

We can do it by searching the text in options of dropdown list and then by setting selected attribute to true.

This code is run in every environment.

 $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected');

edited Feb 10, 2016 at 10:21

maxhb

8,8939 gold badges35 silver badges56 bronze badges

answered Feb 10, 2016 at 10:05

Kaushik Das

4121 gold badge5 silver badges14 bronze badges

Comments

ash · Accepted Answer · 2017-07-21 09:20:03Z

0

setSelectedByText:function(eID,text) {
    var ele=document.getElementById(eID);
    for(var ii=0; ii<ele.length; ii++)
        if(ele.options[ii].text==text) { //Found!
            ele.options[ii].selected=true;
            return true;
        }
    return false;
},

answered Jul 21, 2017 at 9:20

ash

1

1 Comment

Alexander Over a year ago

Could you add some text please (not only a code block)

Community · Accepted Answer · 2020-04-24 09:57:21Z

0

If you want to selected value on drop-down text bases so you should use below changes: Here below is example and country name is dynamic:

    <select id="selectcountry">
    <option value="1">India</option>
    <option value="2">Ireland</option>
    </select>
    <script>
     var country_name ='India'
     $('#selectcountry').find('option:contains("' + country_name + '")').attr('selected', 'selected');
    </script>

edited Apr 24, 2020 at 9:57

CommunityBot

11 silver badge

answered Feb 21, 2018 at 7:40

Chirag Prajapati

5496 silver badges10 bronze badges

Comments

Darshan Balar · Accepted Answer · 2022-11-17 12:27:58Z

0

Effective and efficient way to set selected value in dropdown using your text value

 $("#id option").filter(function () {
     //may want to use $.trim in here
     return $(this).text() == customerName.trim();
 }).prop('selected', true);

answered Nov 17, 2022 at 12:27

Darshan Balar

1088 bronze badges

Collectives™ on Stack Overflow

jQuery: Setting select list 'selected' based on text, failing strangely

12 Answers 12

7 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

7 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related