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的{​​{1}}与更改事件附加到listPaymentCorporate的元素不同。

注意1：：ready函数的缺少右括号：

listPaymentOptimum

注意2：：您可以使用选择器中的逗号$(document).ready(function){ __________________________^ 分隔符在同一条语句中隐藏多个元素，例如：

,

$("#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();

    }
  });
});