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>