CODEWITHSUNDEEP
javascriptjqueryhtmljsfiddle
MGames
MGames

Reputation: 1181

Jquery Select Option With Text Not Working Correctly

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

Upvotes: 2

Views: 2754

Answers (3)

jANVI
jANVI

Reputation: 748

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

Upvotes: 1

Djaouad
Djaouad

Reputation: 22766

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

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

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

Upvotes: 2

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

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>

Upvotes: 5

Related Questions