16

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>
Community
  • 1
  • 1
beckelmw
  • 1,216
  • 1
  • 11
  • 15

4 Answers4

14
var option;
$('#list option').each(function() {
    if($(this).text() == 'Option C') {
        option = this;
        return false;
    }
});
eyelidlessness
  • 62,413
  • 11
  • 90
  • 94
  • 1
    This is a novice question I am sure, but what does setting option = this; do in the above code? – Carvell Fenton Aug 15 '11 at 19:19
  • 1
    @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. – eyelidlessness Aug 15 '11 at 23:30
  • 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. – Carvell Fenton Aug 16 '11 at 12:55
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.

Shog9
  • 156,901
  • 35
  • 231
  • 235
  • 1
    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). – eyelidlessness Oct 27 '08 at 23:53
  • 3
    You can use option[text="optText"] instead of contains if you want exact match rather than "somewhere in string". – Scott Stafford Feb 01 '11 at 20:32
  • @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. – Carvell Fenton Aug 15 '11 at 19:21
  • @CarvellFenton - Since jQuery 1.6 you need to add a colon to find by text. See below - http://stackoverflow.com/a/13686092/609176 – David Spence Dec 03 '12 at 15:16
10
$("#list option").each(function() {
  this.selected = $(this).text() == "Option C";
});
Pavel Chuchuva
  • 22,633
  • 10
  • 99
  • 115
  • 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...? – Carvell Fenton Aug 15 '11 at 19:18
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.

RhinoDevX64
  • 687
  • 1
  • 5
  • 13