Change a button attribute value depending on selector option attribute

Question

I have the following selector with options:

<select name="" id="product-selector" class="list_item">
  <option value="74552" data-id="74552" data-content="50 Items <span class='price' data-count='50 Items' data-price='$20'>$20"> </option>
  <option value="74553" data-id="74553" data-content="100 Items <span class='price' data-count='100 Items' data-price='$30'>$30"> </option>
  <option value="74554" data-id="74554" data-content="300 Items <span class='price' data-count='300 Items' data-price='$45'>$45"> </option>
  <option value="74555" data-id="74555" data-content="500 Items <span class='price' data-count='500 Items' data-price='$60'>$60"> </option>
  <option value="74556" data-id="74556" data-content="1000 Items <span class='price' data-count='1000 Items' data-price='$100'>$100"> </option>
</select>

And I have the following button:

<a role="button" aria-label="Add to Wishlist" class="tinvwl_add_to_wishlist_button" data-tinv-wl-product="2050" data-tinv-wl-productvariation="74552" data-tinv-wl-productvariations="[74552]" data-tinv-wl-producttype="variation" data-tinv-wl-action="addto"><span class="tinvwl_add_to_wishlist-text">Add to Wishlist</span></a>

How can I ensure that when an option is selected, the data-tinv-wl-productvariation attribute in the button changes its value depending on the data-id= attribute of the selected option?

As an example, if I selected the option:

<option value="74553" data-id="74553" data-content="100 Items <span class='price' data-count='100 Items' data-price='$30'>$30"> </option>

with data-id="74553"

my button takes its value and transforms into the following:

<a role="button" aria-label="Add to Wishlist" class="tinvwl_add_to_wishlist_button"  data-tinv-wl-product="2050" data-tinv-wl-productvariation="74553" data-tinv-wl-productvariations="[74553]" data-tinv-wl-producttype="variation" data-tinv-wl-action="addto"><span class="tinvwl_add_to_wishlist-text">Add to Wishlist</span></a>

I tried to try various options, but temporarily due to lack of knowledge and experience, I cannot write the correct script.

Swati · Accepted Answer · 2021-05-11 12:21:10Z

You can write onchange event on button and then use $(this).find("option:selected").data("id") to get data-id value of selected option and then set it inside your button .

Demo Code :

$("#product-selector").on("change", function() {
  $(".tinvwl_add_to_wishlist_button").attr('data-tinv-wl-productvariation', $(this).find("option:selected").data("id"))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="product-selector" class="list_item">
  <option value="74552" data-id="74552" data-content="50 Items <span class='price' data-count='50 Items' data-price='$20'>$20"> </option>
  <option value="74553" data-id="74553" data-content="100 Items <span class='price' data-count='100 Items' data-price='$30'>$30"> </option>
  <option value="74554" data-id="74554" data-content="300 Items <span class='price' data-count='300 Items' data-price='$45'>$45"> </option>
  <option value="74555" data-id="74555" data-content="500 Items <span class='price' data-count='500 Items' data-price='$60'>$60"> </option>
  <option value="74556" data-id="74556" data-content="1000 Items <span class='price' data-count='1000 Items' data-price='$100'>$100"> </option>
</select>
<a role="button" aria-label="Add to Wishlist" class="tinvwl_add_to_wishlist_button" data-tinv-wl-product="2050" data-tinv-wl-productvariation="74552" data-tinv-wl-productvariations="[74552]" data-tinv-wl-producttype="variation" data-tinv-wl-action="addto"><span class="tinvwl_add_to_wishlist-text">Add to Wishlist</span></a>

Robyn · Accepted Answer · 2021-05-11 12:18:48Z

1

Pretty easy, just add an input event to the select and from there, reference the button and just button.dataset['tinv-wl-productvariation'] = e.target.dataset['id']

answered May 11, 2021 at 12:18

Robyn

1611 silver badge8 bronze badges

2 Comments

Morgari Over a year ago

Many thanks! Could you tell me where exactly you need to add your solution?

Robyn Over a year ago

A <script> tag below the HTML will ensure it loads after the DOM builds

Collectives™ on Stack Overflow

Change a button attribute value depending on selector option attribute

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related