The goal is to set the 'selected' attribute of a select list based on the 'text' description rather than the 'value' index.

Using the following selector syntax:

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

This works when text1 is a multi-word phrase ('French toast') or contains non-alphabetic characters, but fails for simple words ('banana').

A simple example would be:

$(document).ready(function(){

var text1 = 'Monkey';

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

var text2 = 'Mushroom pie';

$("#mySelect2 option[text=" + text2 + "]").attr('selected', 'selected');

});

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

In this example, which attempts to set the values of two select lists, it only works for the second list ('Mushroom pie') and fails for the first list ('Monkey'). Try putting a space in text1 ('Mon key') and in the <option>Mon key</option> and it suddenly works.

You can view a working demo here:

http://jsfiddle.net/cnXGZ/

Reproduced in Chrome, Firefox and IE.