JQuery显示隐藏异常：非美国选项无法触发Div2显示

你的需求是：下拉选择框选中「United States」时仅显示.rest1，选中其他任何国家时仅显示.rest2。目前选美国时功能正常，但选其他国家时.rest2无法显示，用!=判断非美国值无效，仅指定具体国家（如Austria）时有效。下面是具体问题排查和解决方法：

常见问题根源 #

1. 下拉框值的匹配错误
   你大概率混淆了下拉选项的val()和text()。比如如果你的下拉选项是这种结构：

   <option value="us">United States</option>
   <option value="at">Austria</option>
   

   此时用$(this).val()拿到的是us/at这类值，而非显示的文本「United States」。如果你的判断条件写的是$(this).val() != "United States"，自然永远不成立，因为val值和判断字符串完全不匹配。

2. 初始状态未正确处理
   若页面加载时.rest2默认处于隐藏状态，而你的代码仅在选中美国时隐藏它、显示.rest1，但切换到其他国家时没有主动触发.rest2的显示逻辑，就会导致它一直隐藏。

3. 代码执行时机问题
   你的jQuery代码如果放在DOM加载完成前执行，会找不到下拉框元素，导致事件绑定失败，后续的切换逻辑根本不会触发。

正确实现代码示例 #

HTML结构

<select id="countrySelect">
  <option value="United States">United States</option>
  <option value="Austria">Austria</option>
  <option value="Canada">Canada</option>
</select>

<div class="rest1" style="display: none;">Div1 - 美国专属内容</div>
<div class="rest2" style="display: none;">Div2 - 其他国家内容</div>

CSS（可选，也可用内联样式控制初始隐藏）

.rest1, .rest2 {
  display: none;
}

jQuery代码

// 确保DOM加载完成后再执行代码
$(document).ready(function() {
  // 初始化时根据默认选中值显示对应内容
  var defaultVal = $('#countrySelect').val();
  toggleContent(defaultVal);

  // 绑定下拉框切换事件
  $('#countrySelect').on('change', function() {
    var selectedVal = $(this).val();
    toggleContent(selectedVal);
  });

  // 封装显示隐藏逻辑，避免重复代码
  function toggleContent(country) {
    if (country === "United States") {
      $('.rest1').show();
      $('.rest2').hide();
    } else {
      $('.rest1').hide();
      $('.rest2').show();
    }
  }
});

关键修正点 #

• 明确判断的是下拉框的val()还是text()：如果选项的value属性是缩写（比如us），要把判断条件改成country === "us"；如果value和显示文本一致，直接用示例中的逻辑即可。
• 初始化时主动执行一次显示隐藏逻辑，避免页面加载后两个div都处于隐藏状态。
• 把显示隐藏逻辑封装成独立函数，既减少重复代码，也更容易排查逻辑错误。

内容的提问来源于stack exchange，提问作者user1607681