根据下拉选项显示按钮

Question

我在 JS 中使用 setInterval 来选择表单中的下拉菜单。根据选择，我想显示 1 个购买按钮或另一个。

我的问题是

这是我的 JF

setInterval (function() {
    var auto_renew = $('#auto_renew').val();

    if (auto_renew == 1) {
        $'#subscription_purchase').css('display', 'none');
        $('#normal_purchase').css('display', 'none');
    } else {
        $'#subscription_purchase').css('display', 'none');
        $('#normal_purchase').css('display', 'inline');
    }
}, 0)

这是我的 HTML

<div id="subscription_purchase" style="display:none;">

  <input type="hidden" name="cmd" value="_xclick-subscriptions">
  <input type="hidden" name="a3" id="hiddentotal2" value="5.00">
  ......
  <input type="submit" name="submit" value="PURCHASE SUB" />

</div>

<div id="normal_purchase" style="display:none;">

  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="amount" id="hiddentotal2"  value="1">
  ...... 
  <input  type="submit" name="submit" value="PURCHASE NORM" />

</div>

必须有更聪明的方法来做到这一点......

Answer 1

给你，

$(document).ready(function(){
  $('#auto_renew').on('change', function(){
     var selected = $(this).val();
     var subscriptionElm = $('#subscription_purchase');
     var normalElm = $('#normal_purchase');
    
     switch (selected) {
         case '1':
            subscriptionElm.show();
            normalElm.hide();
            break;
         case '0':
            subscriptionElm.hide();
            normalElm.show();
            break;
         default:
            subscriptionElm.hide();
            normalElm.hide();
            break;
     }
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="auto_renew">
  <option value="-1"></option>
  <option value="1">Subscription Purchase</option>
  <option value="0">Normal Purchase</option>
</select>
<br/><br/>
<div id="subscription_purchase" style="display:none;">

  <input type="hidden" name="cmd" value="_xclick-subscriptions">
  <input type="hidden" name="a3" id="hiddentotal2" value="5.00">

  <input type="submit" name="submit" value="PURCHASE SUB" />

</div>

<div id="normal_purchase" style="display:none;">

  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="amount" id="hiddentotal2"  value="1">
 
  <input  type="submit" name="submit" value="PURCHASE NORM" />

</div>