Событие OnChange в списке выбора с jQuery не работает

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>