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大小而不是首选的大号。这是我的JSFiddle：https://jsfiddle.net/MGames/8o4u36a6/1/

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

Answer 1

如下所示： -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

提供ID，并通过它们而不是文字进行选择： -

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">
  $20
</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>

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">
  $20
</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>

＆＃13;

最后，如果上面的所有内容都不适合你，我注意到选项的值不同，所以你可以使用它们：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">
  $20
</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>

＆＃13;

Answer 3

你的代码会给你两个元素（Large和XLarge都包含Large）所以选择一个[0]索引：

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

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

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

Jquery选择文本无法正常工作的选项

3 个答案: