How to set a SELECT control using text instead of value using jquery?

Question

I have the following HTML

<SELECT id='cars'>
   <OPTION value='1'>Car One</option>
   <OPTION value='2'>Second Car</option>
   <OPTION value='3'>Another Car</option>
</SELECT>

And I know that I can change the selected value of the drop-down control to any value using:

$('#cars').val(2);   // This will make the combo text: Second Car

But how can I select a value using the text rather than the value?

What I need to do is something like:

$('#cars').val('Another Car');

or

$('#cars').text('Another Car');

but that has no effect...

Any help?

Bhojendra Rauniyar · Accepted Answer · 2015-02-16T12:21:11.400

5

If you want to get the value that contains the text, then you may use contains:

$('#cars option:contains("Another Car")');

~~As per @Burimi suggestion: contains will try to match it's value as well, so you have to use text attribute~~

$('#cars').find('option[text*="Another Car"]').val();

Sorry, for confusion made by comment. But contains just match it's text not it's value.

edited Feb 16 '15 at 12:21

answered Feb 16 '15 at 11:54

1

I don't want to change the text of the option.. I just need to select the value by TEXT not by INDEX – Ahmad Feb 16 '15 at 11:55
contains will try to match it's value as well, so you have to use text attribute, $('#cars').find('option[text*="Another Car"]').val(); – Rosmarine Popcorn Feb 16 '15 at 11:58
The first method worked fine. The second one did not. Thanks anyways – Ahmad Feb 16 '15 at 12:10

score 0 · Answer 2 · answered Feb 16 '15 at 11:58

0

try this one

var text="text";
var check=$('#cars').find('option[text='+text'+]').val();
        $('#cars').val(check);

answered Feb 16 '15 at 11:58

john

this would not work, because the values contain spaces and that would cause errors selecting the right option – Ahmad Feb 16 '15 at 12:15

2 Answers2