jquery 显示隐藏不起作用！=

Question

我正在尝试根据选择字段中的值显示和隐藏内容。

如果选择字段的值为“美国”，我只想在 Div 1 中显示内容。如果该值是除“美国”之外的任何其他国家/地区，则仅在 Div 2 中显示内容。但第二部分不起作用。

这是我到目前为止所拥有的。如果选择美国，这将显示 Div 1，但如果我选择其他国家/地区，则不会显示 Div 2。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=='United States'){
                    $(".rest1").show();
                    $(".rest2").hide();
             
                }
                 if($(this).attr("value")!='United States'){
                    $(".rest2").show();
                    $(".rest1").hide();
                   
                }
                
            });
        }).change();
    });
</script>

如果我指定另一个国家/地区，则以下内容有效，但我需要为除“美国”之外的所有国家/地区显示 Div 2。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=='United States'){
                    $(".rest1").show();
                    $(".rest2").hide();
             
                }
                 if($(this).attr("value")=='Austria'){
                    $(".rest2").show();
                    $(".rest1").hide();
                   
                }
                
            });
        }).change();
    });
</script>

我错过了什么？

David Thomas - 这是更多 html 内容。我希望这已经足够了：

$(document).ready(function() {
  $("select").change(function() {
    $("select option:selected").each(function() {
      if ($(this).attr("value") == 'United States') {
        $(".rest1").show();
        $(".rest2").hide();

      }
      if ($(this).attr("value") != 'United States') {
        $(".rest2").show();
        $(".rest1").hide();
      }

    });
  }).change();
});

.rest1,
.rest2 {
  display: none;
}

<div>
  <label for="country" class="form-label">Country <span class="text-danger">*</span></label>
  <select name="country" id="country" class="form-control" {if option:checked}checked{/if}>
    <option value="">Select Country</option>
    <option value="Austria" {if country=="Austria" }selected="selected" {/if}>Austria</option>
    <option value="Bahamas" {if country=="Bahamas" }selected="selected" {/if}>Bahamas</option>
    <option value="Belgium" {if country=="Belgium" }selected="selected" {/if}>Belgium</option>
    <option value="Canada" {if country=="Canada" }selected="selected" {/if}>Canada</option>
    .....
    <option value="United States" {if country=="United States" }selected="selected" {/if}>United States</option>
  </select>
</div>

<div class="rest1">
  Div 1 content
</div>
<div class="rest2">
  Div 2 content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

Answer 1

您不需要循环遍历选项。只需获取 select 的值并进行比较即可。

$(document).ready(function() {
  $("select").change(function() {
    if ($(this).val() == 'United States') {
      $(".rest1").show();
      $(".rest2").hide();
    } else {
      $(".rest2").show();
      $(".rest1").hide();
    }
  }).change();
});

.rest1,
.rest2 {
  display: none;
}

<div>
  <label for="country" class="form-label">Country <span class="text-danger">*</span></label>
  <select name="country" id="country" class="form-control">
    <option value="">Select Country</option>
    <option value="Austria">Austria</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Belgium">Belgium</option>
    <option value="Canada">Canada</option>
    <option value="United States">United States</option>
  </select>
</div>

<div class="rest1">
  Div 1 content
</div>
<div class="rest2">
  Div 2 content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>