Bitrix. How to update the price when choosing a size?

Question

JavaScript

The product has a certain number of sizes, a price is attached to each size.

I need to make sure that when choosing a size, the price changes depending on what price is set for this size. I was able to display the sizes, but how to update the price
? :

<select  class="input-select" >
      <?foreach($arResult['SIZES'] as $id => $size):?>
        <option  value="<?=$id?>"><?=$size?></option>
      <?endforeach;?>
      </select>

Answer 1

hang an on-change event on your select. Next, I change the value of the element with the price to the desired one, depending on the selected size

Answer 2

Convert to trade offers. That will be more correct

Answer 3

<select onchange="showPrice(this);"  class="input-select" >
    <?foreach($arResult['SIZES'] as $id => $size):?>
        <option  value="<?=$id?>" data-price><?=$size?></option>
    <?endforeach;?>
</select>

function showPrice(e) {
            $('.total_cost').html(e.options[e.selectedIndex].getAttribute('data-price'));
        }