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.

Answer 1

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);

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>  <select>   <option value='0'>One</option>   <option value='1'>Two</option> </select>

jQuery versions below 1.6 and greater than or equal to 1.4

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js'></script>  <select>   <option value='0'>One</option>   <option value='1'>Two</option> </select>

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+.

---

Previous versions

val() should handle both cases.

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js'></script>  <select>   <option value='0'>One</option>   <option value='1'>Two</option> </select>