根据选择器选项属性更改按钮属性值

Question

我有以下带有选项的选择器：

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

如何确保在选择选项时，按钮中的data-tinv-wl-productvariation属性会根据所选选项的data-id=属性更改其值？

例如，如果我选择了以下选项：

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

data-id="74553"

我的按钮获取它的值并转换为以下内容：

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

我尝试了各种选项，但由于缺乏知识和经验，我暂时无法编写正确的脚本。

Answer 1

很简单，只需向 select 添加一个输入事件，然后从那里引用按钮，只需button.dataset['tinv-wl-productvariation'] = e.target.dataset['id']

Answer 2

您可以在按钮上编写 onchange 事件，然后使用$(this).find("option:selected").data("id")获取所选选项的data-id值，然后将其设置在您的按钮中。

演示代码：

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