Mostrar/Ocultar varias Div con Select usando jQuery

Question

que tienen esencialmente la misma situación que la persona a la siguiente pregunta:

Enlace: how to show/hide divs by select.(jquery)

través de una extensa búsqueda en Google pude llegar a varios diferentes métodos en los que las personas afirman que su método funciona. Todavía tengo que hacer que funcione correctamente. Todavía no sé lo suficiente sobre jQuery para comprender completamente cómo escribir esto desde cero, por lo que confío en ejemplos realmente buenos por el momento.

Lo que he estado tratando de trabajar con (sobre la base de ejemplos que he encontrado y probado) es la siguiente:

<script type="text/javascript"> 
    (document).ready(function() { 
     ('.box').hide();<br/> 
     ('#dropdown').change(function() { 
     ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]() 
     ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]() 
     ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]() 
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

• Nota: Estoy utilizando soportes en lugar de la menor que y mayor -than signos alrededor de html para mostrar correctamente en este mensaje.

lo que me pasa cuando pruebo esto:

• Por primera carga sin nada seleccionado => No es DIV pantalla.
• Cuando selecciono DIV Área 1 => DIV Área 2 y 3 se muestran.
• Cuando selecciono DIV Área 2 => DIV Área 1 y 3 se muestran.
• Cuando selecciono DIV Área 3 => DIV Área 1 y 2 se muestran.

Mi cerebro está frito por el día. ¿Qué puedo hacer para arreglar esto?

Answer 1

espectáculo Intercambiar/ocultar para que se vea así:

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]() 

Answer 2

Este código es un poco más sucinta:

$(document).ready 
(
    function() 
    { 
    $("div.box").hide(); 
    $("#dropdown").change 
    (
     function() 
     { 
     var selectedValue = $(this).val(); 
     if(selectedValue !== "0") 
     { 
      $("div.box").show(); 
      $("#div" + selectedValue).hide(); 
     } 
     } 
    ); 
    } 
}; 

En esencia, si existe un valor seleccionado (es decir, la opción no está configurado para "Elegir"), entonces se muestran todos los elementos de div.box. El DIV que coincide con la opción seleccionada queda oculto. Esto debería suceder lo suficientemente rápido para que el flash no se note.

Answer 3

que haría esto:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.box').hide(); 
    $('#dropdown').change(function() { 
    $('.box').hide(); 
    $('#div' + $(this).val()).show(); 
}); 
}); 
</script> 
<form> 
<select id="dropdown" name="dropdown"> 
    <option value="0">Choose</option> 
    <option value="area1">DIV Area 1</option> 
    <option value="area2">DIV Area 2</option> 
    <option value="area3">DIV Area 3</option> 
</select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

Answer 4

@fudgey ha dado una buena solución. pero ten poca duda. Dependerá del valor y necesitará cambiar Identificación de atributo<div> cada vez.

Así que me gustaría hacer esta `

$(document).ready(function() { 
     $('.box').hide(); 
     $('#dropdown').change(function() {  
      var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :     $(this).attr("selectedIndex"); 
      if("" != selectedIdx){ 
       $('#divarea'+ selectedIdx).hide().siblings().show(); 
      } else { 
       $('.box').hide(); 
      }   
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 
</html>` 

No