Question

我有一个这样的网络表单：

<form id="gopro-form" method="post">
  <select name="plan" class="plan-options">
    <option value="0">Value 0</option>
    <option value="1">Value 2</option>
  </select>
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
     data-key="xxxxxxxxxxxxxxxxxxxxxx"
     data-description="Access for a year"
     data-amount="0"
     data-image="images/slogo.png"
     data-locale="auto">
  </script>
  <a onclick="{$go_pro_action}"><img style="position: absolute;" src="/themes/vive/images/paypal.gif"></a>
</form>

我需要一个JavaScript代码，以便在我更改包含value="0"和value="1"的选择框时，它会自动更改data-amount="300"中的数据。此外，默认值为data-amount="0"。

感谢您的帮助。

Answer 1

使用jquery检查所选选项的值。

将ID添加到您的选择

 <select id="plan-options_id" name="plan" class="plan-options">

同时创建一个可变数据量并使用默认值0初始化

var data-amount = 0;

if($( "#plan-options_id option:selected" ).val() == 1 ){
   data-amount = 300;
}

将var替换为脚本数据;

Answer 2

使用jquery为数据attr添加值：

$( ".plan-options" ).change(function() {
  if($( "#plan-options_id option:selected" ).val() == 1 ){
     $('.stripe-button').data('amount', 100);
   }
});

Answer 3

将事件处理程序附加到下拉列表的onchange。

function changeValue(e) {
  var el = document.getElementsByClassName('stripe-button')[0];  
  el.dataset.amount = e.options[e.selectedIndex].value == "1" ? 300 : 0;
}

<form id="gopro-form" method="post">
        <select name="plan" class="plan-options" onchange="changeValue(this)">
            <option value="0">Value 0</option>
            <option value="1">Value 2</option>
        </select>
        <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="xxxxxxxxxxxxxxxxxxxxxx"
            data-description="Access for a year"
            data-amount="0"
            data-image="images/slogo.png"
            data-locale="auto">
        </script>
        <a onclick="{$go_pro_action}"><img style="position: absolute;" src="/themes/vive/images/paypal.gif"></a>
    </form>

如何通过选择框中的onClick envent更改标签值

3 个答案: