How do I select an item by its text value in a dropdown using jQuery?

Question

If I had the following select, and did not know the value to use to select an item in advance like in this question or the index of the item I wanted selected, how could I select one of the options with jQuery if I did know the text value like Option C?

<select id='list'>
<option value='45'>Option A</option>
<option value='23'>Option B</option>
<option value='17'>Option C</option>
</select>

heh - i /thought/ this looked familiar!

nickf
– nickf

2008-10-28 00:37:42 +00:00
Commented Oct 28, 2008 at 0:37 — nickf
– nickf, Commented Oct 28, 2008 at 0:37

eyelidlessness · Accepted Answer · 2008-10-27 23:45:24Z

14

var option;
$('#list option').each(function() {
    if($(this).text() == 'Option C') {
        option = this;
        return false;
    }
});

answered Oct 27, 2008 at 23:45

eyelidlessness

63.6k12 gold badges93 silver badges95 bronze badges

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

3 Comments

Carvell Fenton Over a year ago

This is a novice question I am sure, but what does setting option = this; do in the above code?

eyelidlessness Over a year ago

@Carvell, option is instantiated on line 1, in the outer scope, but its value is undefined. By setting option on line 4, option in the outer scope is now the DOM element whose text value is 'Option C'. After the .each loop, in the outer scope, option can then be used to refer to that particular element.

Carvell Fenton Over a year ago

Ah okay. That makes sense. I was thinking it was supposed to be doing something in the each function that I was missing. Setting for outer scope use I understand :) Thanks.

Shog9 · Accepted Answer · 2008-10-27 23:59:49Z

14

This should do the trick:

// option text to search for
var optText = "Option B";
// find option value that corresponds
var optVal = $("#list option:contains('"+optText+"')").attr('value');
// select the option value 
$("#list").val( optVal )

As eyelidlessness points out, this will behave unpredictably when the text being searched for can be found in more than one option.

edited Oct 27, 2008 at 23:59

answered Oct 27, 2008 at 23:50

Shog9

160k36 gold badges237 silver badges242 bronze badges

4 Comments

eyelidlessness Over a year ago

The problem with that is it would also match an option with the text "Not Option B" or "Option B12" (obviously outside the scope of the example, but the example is obviously contrived).

Scott Stafford Over a year ago

You can use option[text="optText"] instead of contains if you want exact match rather than "somewhere in string".

Carvell Fenton Over a year ago

@Scott I have having a devil of a time getting this to work since upgrading to jQuery 1.6.1 (and 1.6.2). See my comment in Pavel's answer below.

David Spence Over a year ago

@CarvellFenton - Since jQuery 1.6 you need to add a colon to find by text. See below - stackoverflow.com/a/13686092/609176

Pavel Chuchuva · Accepted Answer · 2011-01-11 03:27:24Z

10

$("#list option").each(function() {
  this.selected = $(this).text() == "Option C";
});

answered Jan 11, 2011 at 3:27

Pavel Chuchuva

22.6k11 gold badges103 silver badges119 bronze badges

1 Comment

Carvell Fenton Over a year ago

I have been fighting with this all afternoon. I had code that worked prior to jQuery 1.6.1, e.g. $(this).find('option[text="sometext"]).val(); where $(this) is a select element, but for some reason, that code was just returning undefined. I used your answer @Pavel, which is nice and concise in my opinion, and got my code working again. Thanks! I would still love to know why the old code stopped working...?

RhinoDevX64 · Accepted Answer · 2009-09-01 20:33:09Z

4

function SelectItemInDropDownList(itemToFind){    
         var option;
         $('#list option').each(function(){
             if($(this).text() == itemToFind) {
                 option = this;
                 option.selected = true;
                 return false;    
                }
           });  }

I only modified the previous code because it only located the option in the select list, some may want a literal demonstration.

answered Sep 1, 2009 at 20:33

RhinoDevX64

7071 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How do I select an item by its text value in a dropdown using jQuery?

4 Answers 4

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related