Mostra/Nascondi multipli DIV con Seleziona utilizzando jQuery

Question

ho essenzialmente la stessa situazione come la persona nella seguente domanda:

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

Attraverso approfondite ricerche all'interno di Google sono stato in grado di venire con diversi diversi metodi in cui le persone sostengono che il loro metodo funziona. Devo ancora far funzionare correttamente nessuno. Non conosco ancora abbastanza bene jQuery per comprendere appieno come scrivere da zero, quindi per ora mi baso su esempi davvero validi.

Quello che ho cercato di lavorare con (sulla base di esempi che ho trovato e provato) è questo:

<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: io sto usando parentesi piuttosto che meno-che e di una maggiore -con segni in html da visualizzare correttamente in questo messaggio.

che cosa ottengo quando prova questo:

• Sul primo carico con niente selezionato => Nessun DIV è esposizione.
• Quando si seleziona DIV Area 1 => DIV Area 2 e 3 vengono visualizzate.
• Quando si seleziona DIV Area 2 => DIV Area 1 e 3 vengono visualizzate.
• Quando si seleziona DIV Area 3 => DIV Area 1 e 2 vengono visualizzate.

Il mio cervello è fritto per la giornata. Cosa posso fare per risolvere questo problema?

Answer 1

Swap mostra/nascondi in modo che assomiglia a questo:

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

Answer 2

Questo codice è un po 'più succinta:

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

In sostanza, se v'è un valore selezionato (per esempio, l'opzione non è impostato su "Scegli"), quindi vengono visualizzati tutti gli elementi div.box. Il DIV che corrisponde all'opzione selezionata viene quindi nascosto. Questo dovrebbe accadere abbastanza velocemente in modo che il flash non sia evidente.

Answer 3

farei questo:

<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 dato una bella soluzione. ma ho pochi dubbi. Dipenderà dal valore e sarà necessario modificare ID attributo di<div> ogni volta.

Così mi piacerebbe fare questo `

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

Non