DanSingerman DanSingerman - 4 months ago 19
jQuery Question

jQuery - setting the selected value of a select control via its text description

I have a select control, and in a javascript variable I have a text string.

Using jQuery I want to set the selected element of the select control to be the item with the text description I have (as opposed to the value, which I don't have).

I know setting it by value is pretty trivial. e.g.

$("#my-select").val(myVal);


But I'm a bit stumped on doing it via the text description. I guess there must be a way of getting the value out from the text description, but my brain is too Friday afternoon-ed to be able to work it out.

Answer

Given this HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Select by description for jQuery v1.6+:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);

Select by description for jQuery versions below 1.6 and greater than or equal to 1.4: http://stackoverflow.com/a/3644500/31532

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).attr('selected', true);

Note that while this approach will work in versions that are above 1.6 but less than 1.9, it has been deprecated since 1.6. It will not work in jQuery 1.9+.

Select by description for previous versions:

val() should handle both cases. Are you not seeing it?

Eg:

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"