javascript - 带有文本的 Jquery 选择选项无法正常工作

Question

我正在尝试使用 JQuery 选择具有特定文本的选项，但我不确定如何过滤掉我要查找的文本。

我正在尝试选择 Large 选项，而不是 XLarge 选项。关于如何实现此目标的任何想法？

这是 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>

这是 JQuery:

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

此代码最终选择了 XLarge 尺寸，而不是首选的 Large 尺寸。 这是我的 JSFiddle:https://jsfiddle.net/MGames/8o4u36a6/1/

注意:不要将此标记为重复，因为我尝试过的几乎所有与此问题类似的代码都不适用于我的问题。谢谢你，我爱你很久了:)

Answer 1

像下面这样:-

$('#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>