Setting select list 'selected' attribute based on text, failing strangely

[snubian]

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.

[addyosmani]

I've coded up a few different workarounds for how this could be achieved:

​http://jsfiddle.net/cnXGZ/5/ (2 workarounds) ​http://jsfiddle.net/cnXGZ/2/ ( a third)

Rather than using option[text=] as a part of your selector, you can iterate through the <select> element using this code which checks against text values for the one desired to be 'selected' (this can be done using both find or filter). Alternatively, using your original syntax, just including .find() as a part of the query would result in the correct behaviour.

That said, I think that some of the problems with the bug you submitted do have to do with the relationship of values and text in <select>. When a value isn't explicitly provided, the text becomes the value (and as you can see in the first of my workarounds). Using value-based selectors you are then able to set the value of the list to what you wish.

Closing as (in my opinion) this is more a browser quirk than an actual issue with the jQuery core.