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

Question

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.

Any ideas SO people?

Answer 1

I haven't tested this, but this might work for you.

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });

Answer 2

Get the children of the select box; loop through them; when you have found the one you want, set it as the selected option; return false to stop looping.

Answer 3

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

Eg:

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

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

Answer 4

$("#myselect option:contains('YourTextHere')").val();

will return the value of the first option containing your text description. Tested this and works.

Answer 5

Try this...to select the option with text myText

$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;

Answer 6

take a look at the jquery selectedbox plugin

selectOptions(value[, clear]):

Select options by value, using a string as the parameter $("#myselect2").selectOptions("Value 1");, or a regular expression $("#myselect2").selectOptions(/^val/i);.

You can also clear already selected options: $("#myselect2").selectOptions("Value 2", true);

Answer 7

Its cool I used it in one of my project