Jquery Select Option With Text Not Working Correctly

Question

I'm trying to select an option with a specific text using JQuery, but I'm not sure how to filter out the text I'm looking for.

I'm trying to select the Large option, not the XLarge option. Any idea on how I can accomplish this?

Here is the HTML:

<span class="price">
 $20
</span>
<p id="in-carHEREt" style="display: none;">in cartHERE</p>
 <span class="needsclick select-widget  enabled" id="size-options-link">Medium</span>
 <select id="size-options" name="size-options" class="select-widget ">
<option value="46158">Medium</option>    
<option value="46159">Large</option>    
 <option value="46160">XLarge</option>    
</select>

 <span id="cart-update"><span class="cart-button">add to cart</span></span>

Here is the JQuery:

$('#size-options').find('option:contains(Large)').prop('selected', true);

This code ends up selecting the XLarge size rather than the preferred Large size. Here is my JSFiddle: https://jsfiddle.net/MGames/8o4u36a6/1/

Note: Don't mark this as duplicate as almost every code I've tried on questions similar to this one isn't working for my issue. Thank you and me love you long time :)

Answer 1

Do like below:-

$('#size-options option').each(function(){
  if($(this).text() =='Large'){
     $(this).prop('selected', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">
 $20
</span>
<p id="in-carHEREt" style="display: none;">in cartHERE</p>
 <span class="needsclick select-widget  enabled" id="size-options-link">Medium</span>
 <select id="size-options" name="size-options" class="select-widget ">
<option value="46158">Medium</option>    
<option value="46159">Large</option>    
 <option value="46160">XLarge</option>    
</select>

 <span id="cart-update"><span class="cart-button">add to cart</span></span>