使用jQuery选择列表上的OnChange事件不起作用

Question

我有一个jQuery函数，其执行如下：在更改选择列表值时，它显示一个div。代码是：

$(document).ready(function) {
  $('#listPaymentOptimum').on('change', function() {
    var currentValue = $(this).val();
    switch (currentValue) {
      case '1':
        alert(this.value); // or $(this).val()
        $("#payOptimumFortumo").show();
        $("#payOptimumStripe").hide();
        $("#payOptimumPaypal").hide();

        break;
      case '2':
        $("#payOptimumFortumo").hide();
        $("#payOptimumStripe").show();
        $("#payOptimumPaypal").hide();

        break;
      case '3':
        $("#payOptimumFortumo").hide();
        $("#payOptimumStripe").hide();
        $("#payOptimumPaypal").show();

        break;
      default:
        $("#payOptimumFortumo").hide();
        $("#payOptimumStripe").hide();
        $("#payOptimumPaypal").show();
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="listPaymentCorporate">
  <option value="">Please select your payment mode</option>
  <option value="1">Stripe</option>
  <option value="2">Paypal</option>
  <option value="3">Cryptodevises</option>
</select>
<br>
<div id="payOptimumFortumo">Fortumo here
</div>
<div id="payOptimumStripe">Stripe here
</div>
<div id="payOptimumPaypal">Paypal here
</div>

当我在选择列表中选择某些内容时，没有任何反应。

在此先感谢您的帮助。这是非常赞赏 ：）

Answer 1

选择列表id的listPaymentCorporate与更改事件附加到listPaymentOptimum的元素不同。

注1：就绪功能在以下方面缺少左括号：

$(document).ready(function){
__________________________^

注意2：您可以使用选择器中的逗号,分隔符在同一语句中隐藏多个元素，如：

$("#payOptimumFortumo, #payOptimumPaypal").hide();

$(function() {
  $('#listPaymentCorporate').on('change', function() {
    var currentValue = $(this).val();

    switch (currentValue) {
      case '1':
        $("#payOptimumStripe").show();
        $("#payOptimumFortumo, #payOptimumPaypal").hide();

        break;
      case '2':
        $("#payOptimumPaypal").show();
        $("#payOptimumFortumo, #payOptimumStripe").hide();

        break;
      case '3':
        $("#payOptimumFortumo").show();
        $("#payOptimumPaypal, #payOptimumStripe").hide();

        break;
      default:
        $("#payOptimumPaypal").show();
        $("#payOptimumFortumo, #payOptimumStripe").hide();

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="listPaymentCorporate">
  <option value="">Please select your payment mode</option>
  <option value="1">Stripe</option>
  <option value="2">Paypal</option>
  <option value="3">Cryptodevises</option>
</select>
<br>
<div id="payOptimumFortumo">Fortumo here</div>
<div id="payOptimumStripe">Stripe here</div>
<div id="payOptimumPaypal">Paypal here</div>