我如何將 attr 從 choisen 選項標簽更改為值？

Question

我有這個 -

<a id="size" href="#" data-name="<?php the_field('image'); ?>" data-article="<?php the_field('article'); ?>" data-size="" data-price="<?php the_field('price'); ?>" class="add-to-cart btn">
<button>Add Item</button>
</a>

和這個 -

<?php
 $values = get_field('size');
  if($values) {
     echo '<select>';
         foreach($values as $value) {
      echo '<option>' . $value . '</option>'; }
echo '</select>'; 
  }
?>

如果我從我需要的 select 中選擇一些選項，那么data-size=""更改data-size="_valuefromchoisedoption_"

這是我的 js 我如何在購物卡中添加項目 -

$('.add-to-cart').click(function (event) {
    event.preventDefault();
    var name = $(this).data('name');
    var price = Number($(this).data('price'));
    var article = $(this).data('article');
    var size = Number($(this).data('size'));
    shoppingCart.addItemToCart(name, price, article, size, 1);
    displayCart();

    $(function(){
       I need help to add srctipt on this place.
    })

我更改選項並單擊添加按鈕和數據大小更改選擇選項的值。

對不起，我的英語不好！

Answer 1

我假設在更改 select 選項時，錨標記的數據大小屬性應使用所選選項的值進行更新。

1) 將 function 附加到 select 元素作為 onchange 屬性，當 select 選項更改時將調用該屬性。

2）獲取選項的選定文本值：

$(ele).children("option:selected").text()

3）更新錨標簽屬性：

$('#size').attr('data-size', $(ele).children("option:selected").text())

檢查下面的代碼片段：

 function populateField(ele) { $('#size').attr('data-size', $(ele).children("option:selected").text()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="size" data-size="">test</a> <select onchange="populateField(this);"> <option>A</option> <option>B</option> <option>C</option> </select>