根据期限计划设置 URL

Question

我正在使用Wordpress网站，我有每月，每年和半年一次的计划。目前，我只能为立即订购按钮设置一个链接。

我想要的是，我想根据期限计划设置特定的URL。例如

For monthly : a=add&pid=1
For anually : a=add&pid=2
for bianually : a=add&pid=3

如果你愿意，这是我的代码

<div class="price white-text regular-font"><span>
class="price_val">$4.95</span> /mo</div>
<select class="plans-select">
<option value="$4.95">Triennially</option>
<option value="$5.95">Biannually</option>
<option value="$6.95">Aannually</option>
<option value="$7.95">Monthly</option>
</select>
</div>
<div class="transparent-btn btn1"><a class="lightgrey-bg black-text
regular-font" href="#">Order Now</a></div>

此时有一个下拉菜单可以选择术语。 现在确定如何根据选择更改"立即订购"的链接。

Answer 1

1 更改

<option value="$6.95">Aannually</option> 

自

<option value="3">Aannually $6.95</option>

对其他人进行类似的修改

2 添加此脚本

<script>
    $(function(){
      $('.plans-select').on('change', function () {
          var plan_id = $(this).val(); 
          if (url) { // require a URL
              window.location = 'a=add&pid=' + plan_id; // redirect
          }
          return false;
      });
    });
</script>

如果您必须将价格设置为期权值，您还可以拥有价格/计划对象

prices = {'$6.95':3, .......}

并使用它来获取所选value的plan_id，例如$6.95

不要忘记在脚本部分之前加载jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

您可以简单地使用四个具有不同href URL 的按钮，而不是选择和选项元素。

或者，您使用真正的 HTML <form>，将type="get"和目标网址作为action属性，如果您将name="pid"作为属性添加到 select 标记，则会将这些pid值附加到 URL。