jquery 如何在一个页面中改变多个表单的选项选择和按钮链接?

cfh9epnr  于 2022-12-22  发布在  jQuery
关注(0)|答案(1)|浏览(109)

我如何从选项中获取值,并使用选项值更新按钮链接?我遇到了这个solution,但有几件事我想实现,没有涵盖。
Example JSFiddle.
当一个页面中有三个而不是一个表单时,我如何使用相同的脚本?

$('select').on('change', function() {
  $('.button').attr('href', 'cart.php?a=add&pid=' + $(this).val());
});
<select id="micro-plan">
  <option value="5">$5.00 monthly</option>
  <option value="10">$10.00 monthly</option>
  <option value="15">$15.00 monthly</option>
  <option value="20">$20.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=1" class="button" target="_blank">Order</a>

<select id="mega-plan">
  <option value="25">$25.00 monthly</option>
  <option value="30">$30.00 monthly</option>
  <option value="35">$35.00 monthly</option>
  <option value="40">$40.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=25" class="button" target="_blank">Order</a>

<select id="super-plan">
  <option value="45">$45.00 monthly</option>
  <option value="50">$50.00 monthly</option>
  <option value="65">$65.00 monthly</option>
  <option value="70">$70.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=45" class="button" target="_blank">Order</a>

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

k10s72fa1#

1.对每个按钮使用相同的类(或者不使用类--您可以只使用元素类型)。
1.按按钮与select元素的接近程度查询按钮。
1.使用$(this)来引用事件在其上触发的元素,就像您必须获取其值一样。

$('select').on('change', function() {
  $(this).next('.button').attr('href', 'cart.php?a=add&pid=' + $(this).val());
});
<select id="micro-plan">
  <option value="5">$5.00 monthly</option>
  <option value="10">$10.00 monthly</option>
  <option value="15">$15.00 monthly</option>
  <option value="20">$20.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=1" class="button" target="_blank">Order</a>

<select id="mega-plan">
  <option value="25">$25.00 monthly</option>
  <option value="30">$30.00 monthly</option>
  <option value="35">$35.00 monthly</option>
  <option value="40">$40.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=25" class="button" target="_blank">Order</a>

<select id="super-plan">
  <option value="45">$45.00 monthly</option>
  <option value="50">$50.00 monthly</option>
  <option value="65">$65.00 monthly</option>
  <option value="70">$70.00 monthly</option>
</select>
<a href="cart.php?a=add&pid=45" class="button" target="_blank">Order</a>

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

相关问题