Как я могу изменить attr на значение из выбранного тега option?

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>'; 
  }
?>

Если я выберу какую-то опцию из моего выбора, мне нужно тогда 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

Я предполагаю, что при изменении опции выбора атрибут размера данных тега привязки должен обновляться со значением из выбранной опции.

1) Присоединить функцию для выбора элемента в качестве атрибута onchange, который будет вызываться приизменения параметров выбора.

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>