Jquery Select 文本选项无法正常工作

Question

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

我正在尝试 select Large 选项，而不是 XLarge 选项。关于如何完成此操作的任何想法？

这里是HTML:

<span class="price">
 
</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);

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

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

Answer 1

通过它们而不是文本提供 ID 和 select:-

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

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

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

如果您不想使用 Id，请使用 :nth-child(n):-

$('#size-options').find('option:nth-child(2)').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">
  
</span>
<p id="in-cart" style="display: none;">in cart</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>

最后，如果以上所有内容都不适合您，我注意到选项的值不同，因此您可以使用这些选项：

$('#size-options').find('option[value=46159]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">
  
</span>
<p id="in-cart" style="display: none;">in cart</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>

Answer 2

按如下操作：-

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

Answer 3

您的代码将为您提供两个元素（Large 和 XLarge，因为两者都包含 Large）所以选择一个位于 [0] 索引的：

<span class="price">
     
    </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>

------------------------JS-------------------- -----

var option = $('#size-options').find('option:contains(Large)')[0];
 $(option).prop('selected', true);

Jquery Select 文本选项无法正常工作

Jquery Select Option With Text Not Working Correctly

html

javascript

jquery

jsfiddle