根据选择值显示/隐藏按钮答案

【问题标题】：Show/Hide button based on Select value根据选择值显示/隐藏按钮
【发布时间】：2015-11-24 22:37:45
【问题描述】：

在我的 Shopify 商店中，我有一个 for 循环，它将针对页面上的每个产品显示。对于每种产品，在底部，我都有一个select，它将确定每种产品的计费频率。如果重要的话，目前有 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() 添加到函数的所有可能组合，以及直接从 select 调用函数（因此使用 onchange="changeFunction();"）。谁能帮帮我？

【问题讨论】：

标签： jquery drop-down-menu onchange

【解决方案1】：

您不需要使用“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();
        }
    });
});

这是一个有效的小提琴：http://jsfiddle.net/qyb83hxv/1/

【讨论】：

所以我以为我尝试了这个确切的代码，但是由于某些原因，在选择值的更改上，代码没有被调用。我尝试将脚本放在 for 循环的内部和外部，但都没有奏效。该网站是：store.carumacam.com/collections/service-plans
检查我更新的答案。第一个问题是您没有将它包装在 $(document).ready(function(){ 包装器中。但是您还有 3 个下拉菜单和 3 个按钮都具有相同的类。因此，更改一个下拉菜单将更改所有按钮，除非我们修改代码以使它们以特定按钮为目标。
问题 #2 是您有 3 个具有相同 ID (id="ma") 的下拉菜单。这是一个很大的禁忌。使用 $('#ma') 只会返回它找到的第一个元素。使用像 $('.ma') 这样的类将返回匹配元素的数组。
这是工作版本：jsfiddle.net/qyb83hxv/3 如果您检查此版本：jsfiddle.net/qyb83hxv/2 您会看到只有第一个下拉菜单有效，因为它们都有相同的 id。
非常感谢您的帮助！但是，我想了一种方法来提供按钮/选择不同的 ID，但仍然没有触发......（如果有一个正在工作，我会很高兴的！）

【解决方案2】：

添加更改功能以选择

<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>

【讨论】：