显示/隐藏按钮选择值

时间:2015-11-24 22:37:46

标签: jquery drop-down-menu onchange

在我的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>

然后我继续&#39;我想根据所选选项(每月或每年)显示的按钮

<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();")。任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:5)

您不需要使用&#39; each()&#39;功能。此外,添加到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/

答案 1 :(得分:0)

添加更改功能以选择

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