javascript - 使用 html 选择值更新 javascript

Question

这是我的代码:

<select name="points">
  <option value="5">5 points</option>
  <option value="10">10 points</option>
  <option value="50">50 points</option>
</select>

这是我的 JavaScript 代码:

<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="test key"
  data-amount="option value here" // i need help here
  data-name="Site Name"
  data-description="2 widgets ($20.00)"
  data-image="/128x128.png">
</script>

javascript代码是一个弹出按钮。我想获取选择选项值，并且想将其插入到js代码中的数据量中。我该怎么做？

Answer 1

使用change方法检测选择列表的值，然后将其应用到按钮的data-amount属性。

$(document).ready(function(){
    $('[name=points]').change(function(){
      var newAmount=$(this).val();
      $('.stripe-button').data('amount',newAmount);
    })
});