Setting a select by label via jquery in 1.4

Question

In jquery 1.3.2, the following works:

<select id="c">
  <option value="325">Red</option>
  <option value="833">Purple</option>
</select>

$('#c').val('Red');

And it changes the select to the option with RED as its label. In jQuery 1.4 this fails. How can I get the same result in 1.4? Was this a bug in the 1.3 version?

Answer 1

Try

$('#c').val("325");

Answer 2

$('#c').val('Red');

shouldn't have (imho) worked in jQuery 1.3 because "Red" isn't the value. "325" is. What does this do:

$('#c').val("325");

Answer 3

You would have to do it this way:

$('option:contains("Red")', '#c')[0].selected = true

EDIT

@Tomalak

If the labels arent mutually exclusivey you'd need to rewrite the selector:

$.fn.labselect = function(str) {
    $('option', this).filter(function() {
       return $(this).text() == str;
    })[0].selected = true;

    return this;
};

// Use it like this
$('#c').labselect('Red');

Answer 4

$('#c').val('325');

or

// earlier - define a text-equals selector
jQuery.extend(jQuery.expr[":"], {
  "text-equals": function (a, i, m) {
    return (a.textContent||a.innerText||jQuery(a).text()||'')==m[3];
  }
});

// later - use it
$red = $('#c option:text-equals(Red)');
$('#c').val($red.val());

The custom selector is one possibility. You could also do exactly the same thing in a filter() callback, for example.