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

【问题标题】：OnChange event on select list with jQuery does not working使用 jQuery 的选择列表上的 OnChange 事件不起作用
【发布时间】：2018-09-13 15:37:28
【问题描述】：

我有一个 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>

当我在选择列表中选择某些内容时，什么也没有发生。

提前感谢您的帮助。非常感谢:)

【问题讨论】：

您的代码中存在语法错误。我想说这是题外话。请打开浏览器的调试控制台并检查那里的错误消息。而且这个 $('#listPaymentOptimum') 的 ID 与 HTML 选择不同。

标签： jquery select onchange

【解决方案1】：

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

注意 1： ready 函数在 :

中缺少左括号

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

【讨论】：