Jquery 基于选择值显示/隐藏按钮

在我的Shopify商店中，我有一个for循环，它将在页面上显示每个产品。对于每个产品，在底部，我有一个选择，它将决定每个产品的计费频率。目前有3种产品，如果重要的话：

<select id="ma" class="single-option-selector" name="frequency">
    <option value="">Monthly</option>
    <option value="annual">Annual - 1 Month Free</option>
</select>

然后，我有“继续”按钮，我希望根据所选选项每月或每年显示

<a href="{{ product.url | within: collection }}" class="monthly-btn btn">
    <span id="AddToCartText">Select Plan</span>
</a>

<a href="{{ product.url | within: collection | append: '-annual' }}" class="annual-btn btn">
    <span id="AddToCartText">Select Plan</span>
</a>

我正在寻找正确的脚本，它将根据当前选择的选项隐藏和显示按钮。这里是我现在没有做任何事情，我已经确认添加了警报在那里-我没有得到任何警报弹出窗口时，改变了价值

<script>
  $(document).ready( function () {
    $('.annual-btn').each( function() {
      $(this).hide();
    });
  });

$('#ma').each( function() { 
  $(this).change( function () {
    var valx = $(this).val()
    if (valx == 'annual') {
      $('.monthly-btn').hide();
      $('.annual-btn').show();
      alert('test');
    } else {
      $('.monthly-btn').show();
      $('.annual-btn').hide();
      alert('test2');
    }
  });
});
</script>

---

此外，我还尝试了将.each、.change添加到函数中的各种可能组合，以及使用onchange=changeFunction；直接从select so调用函数；。有人能帮我吗？

添加可选择的更改功能

<select id="ma" onchange="somefunction()" class="single-option-selector" name="frequency">
    <option value="monthly">Monthly</option>
    <option value="annual">Annual - 1 Month Free</option>
</select>


<script>
somefunction(){
 if($("#ma").val() === "monthly"){
   $(".monthly-btn").show();
   $(".annual-btn").hide();
 }else{
   $(".monthly-btn").hide();
   $(".annual-btn").show();
 }
}
</script>

---

您不需要使用“each”函数。此外，添加到DOM元素的任何事件侦听器都应该包装在

$(document).ready(function(){ ... code goes here ...});

或者它的快捷方式：

$(function(){ ... code goes here ...});

否则，添加事件侦听器时元素可能不存在

就我个人而言，我会使用css来隐藏年度btn

.annual-btn { display: none; }

然后，您的javascript将如下所示：

$(function(){
    $('#ma').change(function(){
       var opt = $(this).val();
        if(opt == 'annual'){
            $('.monthly-btn').hide();
            $('.annual-btn').show();
        }else{
            $('.monthly-btn').show();
            $('.annual-btn').hide();
        }
    });
});

---

这里有一个可行的方法：

所以我想我尝试了这个精确的代码，但是由于某些原因，在更改select值时，代码没有被调用。我尝试将脚本放在for循环的内部和外部，但都不起作用。该网站是：检查我的更新答案。第一个问题是您没有将其包装在$document.readyfunction中{wrapper。但是您也有3个下拉列表和3个按钮，它们都具有相同的类。因此，更改一个下拉列表将更改所有按钮，除非我们修改代码使它们以特定的按钮为目标。问题2是，您有3个相同ID=ma的下拉列表。这是一个很大的禁忌。使用$'ma'只会返回它找到的第一个元素。其中u唱一个像$'.ma'这样的类会返回一个匹配元素的数组。下面是工作版本：如果你检查这个版本：你会看到只有第一个下拉菜单可以工作，因为它们都有相同的id。非常感谢你的帮助！但是，我想了一种方法来给按钮/选择不同的id，但仍然没有一个启动…我会很高兴如果有人在工作，那就太好了！