jQuery隐藏的div不会在更改事件中再次显示答案

【问题标题】：jQuery hidden div doesn't show again with on change eventjQuery隐藏的div不会在更改事件中再次显示
【发布时间】：2026-01-29 08:15:02
【问题描述】：

        
<div class="waive_admin_fee">
    <label class="label">Waive admin fee?</label>
    <div>
        <div class="select">
            <select name="waive_admin" required>
                <option value="no">No</option>
                <option value="yes">Yes</option>
            </select>
        </div>
    </div>
</div>
<div class="remaining_payments">
    <label class="label">Remaining Payments</label>
    <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
            <i class="fa fa-money"></i>
        </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
    </div>
</div>

<div id="payments">
    <label class="label">Monthly</label>
    <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
    <label class="label">Customized</label>
    <input type="radio" name="p_option" id="custom" value="custom" required>
</div>

我正在尝试根据选择下拉值隐藏几个 div。如果值为 Yes，则必须隐藏 div，否则必须显示它们。 HTML 代码：

<div>
    <label class="label" for="">Total Balance Paid </label>
    <div>
      <div class="select">
        <select name="total" id="total">
          <option value="No">No</option>
          <option value="Yes">Yes</option>
        </select>
      </div>
    </div>
 </div>

JS：

$(document).ready(function() {
    $("select[name=total]").on("change", function() {
        if($("select[name=total]").val() == 'Yes') {
          $("#payments,.waive_admin_fee,.remaining_payments").hide();
        } else {
            $("#payments,.waive_admin_fee,.remaining_payments").show();
        }
    });
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

当值为yes时隐藏div，但当值为no时不显示。

【问题讨论】：

这对于选择器来说看起来不正确。这也不是一个完整的例子，缺少很多元素。请提供一个最小、完整且可验证的示例：*.com/help/mcve
您尚未显示您试图隐藏/显示的 div 的 HTML。
"#payments,.waive_admin_fee,.remaining_payments" 这里有什么元素？
除非 HTML 标记有什么奇怪的地方，否则我无法重现该问题。

标签： javascript jquery html

【解决方案1】：

在 Select 元素上使用 change 事件意味着必须更改当前选择的值。 When there are 2 options, this only happens when the other option is selected.请考虑以下示例。

$(function() {
  $("#total").on("change", function() {
    if ($(this).val() == 'Yes') {
      $(this).parent().next(".pay-info").hide();
    } else {
      $(this).parent().next(".pay-info").show();
    }
  });
});

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="label" for="">Total Balance Paid </label>
  <div class="select">
    <select name="total" id="total">
      <option></option>
      <option value="No">No</option>
      <option value="Yes">Yes</option>
    </select>
  </div>
  <div style="display: none;" class="pay-info">
    <div class="waive_admin_fee">
      <label class="label">Waive admin fee?</label>
      <div>
        <div class="select">
          <select name="waive_admin" required>
            <option value="no">No</option>
            <option value="yes">Yes</option>
          </select>
        </div>
      </div>
    </div>
    <div class="remaining_payments">
      <label class="label">Remaining Payments</label>
      <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
            <i class="fas fa-dollar-sign"></i>
        </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
      </div>
    </div>
    <div id="payments">
      <label class="label">Monthly</label>
      <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
      <label class="label">Customized</label>
      <input type="radio" name="payment_option" id="custom" value="custom" required>
    </div>
  </div>
</div>

你可以看到这个 Select 元素有 3 个选项。用户必须做出选择。

我会考虑将其更改为 Checkbox、Radio 或 Slider，而不是 Select 元素。在我看来，它们更适合二元选择。

您可能还想看看您对 Id 与 Class 的使用。如果此页面将显示多个客户，那么您可能希望避免使用 id 属性来支持 class。您还将在 jQuery 中发现，使用 -（破折号）比使用 _（下划线）作为属性选择器更有帮助。

希望对您有所帮助。

【讨论】：

我注意到toggle() 也适用于我的要求。尝试过：$("#payments,.waive_admin_fee,.remaining_payments").toggle(); 虽然我不确定与hide() 和show() 相比效率如何
您能否分享您对在此处使用toggle() 而不是hide() 和show() 的看法
@Bharath 在功能上，对于这种用法，没有区别。如果您计划执行其他操作，.show() 和 .hide() 可以包含在这些事件中。如果您只想更改可见性，.toggle() 将无需键入。

【解决方案2】：

您的问题可能是您的选择器格式不正确。选择器中不应该有逗号。 IE。 $("#payments,.waive_admin_fee,.remaining_payments").

这是一个工作示例：

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div>
    <label class="label" for="">Total Balance Paid </label>
    <div>
      <div class="select">
        <select name="total" id="total">
          <option value="No">No</option>
          <option value="Yes">Yes</option>
        </select>
      </div>
    </div>
 </div>

 <div id="payments">
  <div class="waive_admin_fee">
    <div class="remaining_payments">
  hide me
    </div>
  </div>
 </div>

<script>
  $(document).ready(function() {
    $("select[name=total]").on("change", function() {
        if($("select[name=total]").val() == 'Yes') {
          $("#payments .waive_admin_fee .remaining_payments").hide();
        } else {
            $("#payments .waive_admin_fee .remaining_payments").show();
        }
    });
});
</script>

</body>
</html>

【讨论】：

其实逗号可以用在查询选择器上：api.jquery.com/multiple-selector

【解决方案3】：

你可以试试这个 html。我认为一开始你必须有多个选择器来保持它们没有空间。

<div>
        <label class="label" for="">Total Balance Paid </label>
        <div>
            <div class="select">
                <select name="total" id="total">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
    </div>

   <div class="helo"> // define class here
    <label class="label">Remaining Payments</label>
    <div>
        <input class="input" type="text" name="pn" value="1" required>
        <span class="icon">
        <i class="fa fa-money"></i>
    </span>
        <p class="help has-text-info">7 or more payments will have $150 extra cost.</p>
    </div>
</div>

<div id="test"> // define id here.
    <label class="label">Monthly</label>
    <input type="radio" name="p_option" id="monthly" value="monthly" checked required>
    <label class="label">Customized</label>
    <input type="radio" name="payment_option" id="custom" value="custom" required>
</div>

在 Jquery 中

$(document).ready(function () {
    $("select[name=total]").on("change", function () {
        if ($(this).val() === 'Yes') {
            $('#test, .helo').show();
        } else {
            $('#test, .helo').hide();
        }
    });
});

希望这对你有用。

【讨论】：

仅代码答案没有用。你改变了什么？为什么？为什么它会解决 OP 的问题？