How to select a <select> element on the basis of selected option text?

Question

Suppose there are many <select> elements in a form. I need a selector that selects a <select> element whose selected option has certain text. To explain, let's say there are 5 <select> elements of class "color". Each of them have 3 <option> with texts "white", "black", "green". Now I need to select the elements whose selected option is "white".

<select class="color" > 
  <option value=""></option>
  <option value="1"> white </option>
  <option value="2"> black </option>
  <option value="2"> green </option>
</select>

In the scenario as depicted in the below image, I need to select those two white <select>s.

Thanks.

Answer 1

Try

$('select.color option:contains(white)').prop('selected','selected');

DEMO

Select all the elements whose selected option is "white".

Updated DEMO

$('select.color option:contains(white):selected').parent('select');

Match Exact value

DEMO

$('select.color option:contains(white):selected').each(function(){
    if($(this).text() == 'white'){
        $(this).parent('select').css('color','blue');
    }
});