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 acplish 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: /

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

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 acplish 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/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 :)

• javascript
• jquery
• html
• jsfiddle

• I don't get what's wrong with people, just down-voting without even considering the answer, WTH! – Djaouad Commented Sep 6, 2017 at 18:13
• Thanks for the various ways of selecting the value, but it doesn't select it by finding text like I asked for. – MGames Commented Sep 6, 2017 at 18:16
• Still, it's correct for your particular problem. – Djaouad Commented Sep 6, 2017 at 18:18
• Thank you bro, I really do appreciate your effort. But Alive To Die's answer was really what I was looking for – MGames Commented Sep 6, 2017 at 18:22
• MGames I know, @AlivetoDie 's answer does exactly what you want, and I was not talking about it, I was talking about my answer, when It was down-voted twice, but now it's alright, I just think that we shouldn't down-vote a correct answer. – Djaouad Commented Sep 6, 2017 at 18:29

3 Answers 3

Do like below:-

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

<script src="https://ajax.googleapis./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>

Provide id's, and select through them rather than text:-

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

<script src="https://ajax.googleapis./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>

If you don't want to use Id's, use :nth-child(n):-

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

<script src="https://ajax.googleapis./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>

Finally, if everything above doesn't work for you, I noticed that the values are different for the options, so you could use those:

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

<script src="https://ajax.googleapis./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>

Your code will give you two elements (Large and XLarge as both contains Large) So selecting one which is at [0] index:

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