Change select option based on attribute

Question

I am trying to change a select option on click but I don't want to use the option value. My code works if I give my button a value='3' but what I want is to select the one with data-price="0" which in my case is the one with value='3'.

JS :

jQuery(document).ready(function () {
    jQuery('#sample-addtocart-button').click(function(){
        jQuery('.product-custom-option').val(jQuery(this).attr('value'));
    });
});

Html :

<button value="0" id="sample-addtocart-button" type="button">Free</button>

<select class="product-custom-option">
    <option value="">-- Please Select --</option>
    <option data-price="10" value="1">£10.00</option>
    <option data-price="20" value="2">£20.00</option>
    <option data-price="0" value="3">FREE</option>
</select>

Any help will be appreciated

Pranav C Balan · Accepted Answer · 2016-06-10 13:57:44Z

5

You can use attribute equals selector to get the option and then select option by setting selected property using prop() method.

jQuery(document).ready(function() {
  jQuery('#sample-addtocart-button').click(function() {
    jQuery('.product-custom-option option[data-price="' + jQuery(this).attr('value') + '"]').prop('selected', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="0" id="sample-addtocart-button" type="button">Free</button>

<select class="product-custom-option">
  <option value="">-- Please Select --</option>
  <option data-price="10" value="1">£10.00</option>
  <option data-price="20" value="2">£20.00</option>
  <option data-price="0" value="3">FREE</option>
</select>

edited Jun 10, 2016 at 13:57

answered Jun 10, 2016 at 13:50

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Genov Over a year ago

Cheers mate, much appreciated!

2 revs user1106925 · Accepted Answer · 2016-06-10 13:58:12Z

1

You can select elements by attribute, and then set the selected property on the element.

jQuery(document).ready(function () {
    jQuery('#sample-addtocart-button').click(function(){
        jQuery('.product-custom-option [data-price=' + this.value + ']').prop("selected", true);
    });
});

This selects the element with a data-price attribute equal to the value of this.value, which is a descendant of .product-custom-option, and sets its selected property to true.

Without jQuery, it could look like this:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector('#sample-addtocart-button').addEventListener("click", function(){
    document.querySelector('.product-custom-option [data-price=' + this.value + ']').selected = true;
  });
});

And a handful of helper methods always helps with the verbosity:

function listen(el, typ, fn, cap) {
  el && el.addEventListener(typ, fn, cap)
}
function query(el, sel) {
  if (typeof el === "string") {
    sel = el;
    el = document;
  }
  return el.querySelector(sel)
}

listen(document, "DOMContentLoaded", function () {
  listen(query('#sample-addtocart-button'), "click", function(){
    query('.product-custom-option [data-price=' + this.value + ']').selected = true;
  });
});

edited Jun 10, 2016 at 13:58

community wiki

2 revs
user1106925

2 Comments

Genov Over a year ago

Cheers mate, much appreciated!

user1106925 Over a year ago

My pleasure. Glad it helped.

Dhara Parmar · Accepted Answer · 2016-06-10 13:52:25Z

0

Try this:

jQuery('#sample-addtocart-button').click(function(){
        var val= jQuery(this).attr('value');
        jQuery('.product-custom-option option[data-price='+val+']').prop('selected', true); // it will find the select option with certain data-price and make it selected
});

answered Jun 10, 2016 at 13:52

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Change select option based on attribute

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related