Início / coding / Perguntas / 77055655
Accepted
user1607681
Asked: 2023-09-07 06:47:39 +0800 CST

jquery show-hide não funciona para valor!

  • 772

Estou tentando mostrar e ocultar conteúdo com base no valor do campo selecionado.

Desejo exibir conteúdo apenas na Div 1 se o valor de um campo de seleção for 'Estados Unidos'. E somente exibir conteúdo na Div 2 se o valor for qualquer outro país, EXCETO 'Estados Unidos'. Mas a segunda parte não está funcionando.

Aqui está o que tenho até agora. Isso exibirá a Div 1 se os Estados Unidos forem selecionados, mas não a Div 2 se eu selecionar outro país.

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

O seguinte funciona se eu especificar outro país, mas preciso que o Div 2 seja exibido para TODOS os países, exceto 'Estados Unidos'.

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

o que estou perdendo?

David Thomas - Aqui está mais do html. Espero que isso seja suficiente:

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

jquery

1 respostas

  1. Best Answer

    Você não precisa percorrer as opções. Basta pegar o valor do select e compará-lo.

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

    • 1

relate perguntas