2009-09-11 9 views
8

J'ai essentiellement la même situation que la personne la question suivante:Afficher/Masquer plusieurs DIVs Select en utilisant jQuery

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

Grâce à une vaste recherche dans Google, j'ai pu venir avec plusieurs différentes méthodes dans lesquelles les gens prétendent que leur méthode fonctionne. Je n'ai pas encore réussi à travailler correctement. Je ne sais pas encore assez sur jQuery pour comprendre comment écrire ceci à partir de zéro, donc je compte sur de très bons exemples pour le moment.

Ce que j'ai essayé de travailler avec (à partir d'exemples que j'ai trouvé et essayé) est ceci:

<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> 
  • Note: J'utilise les supports plutôt que le moins que et plus -que les signes autour de html pour afficher correctement dans ce message.

Ce que je reçois quand je teste ceci:

  • Lors de la première charge rien selected => Non DIV est affichée.
  • Lorsque je sélectionne la zone DIV 1 => DIV Les zones 2 et 3 sont affichées.
  • Lorsque je sélectionne la zone DIV 2 => DIV Les zones 1 et 3 sont affichées.
  • Lorsque je sélectionne la zone DIV 3 => DIV Les zones 1 et 2 sont affichées.

Mon cerveau est frit pour la journée. Que puis-je faire pour résoudre ce problème?

+0

Pas une réponse à votre question, mais la méthode # explorerai jQuery bascule pour cacher/montrer conditionnelle. –

Répondre

1

Swap afficher/cacher pour qu'il ressemble à ceci:

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

Je m'excuse de ne pas avoir attrapé cela quand j'ai posté à l'origine ... Dans mon code de travail, les signes du dollar sont présents. Ils doivent avoir été enlevés quand j'ai posté mon code. –

1

Ce code est un peu plus succincte:

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

Essentiellement, s'il y a une valeur choisie (c.-à l'option n'est pas défini sur "Choisir"), tous les éléments div.box sont affichés. Le DIV correspondant à l'option sélectionnée est ensuite masqué. Cela devrait arriver assez rapidement pour que le flash ne soit pas perceptible.

+0

Vous avez peut-être mal compris. Je ne veux pas qu'aucun des éléments DIV soit montré au début. Je veux seulement que ONE soit affiché une fois qu'une sélection a été faite. –

+0

@Thomas Grant: Ne pas $ ("div.box"). Hide() les éléments sur le chargement de la page? –

10

Je ferais ceci:

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

Après avoir lu votre code suggéré, j'ai réalisé que dans mes trois lignes telles que: ('# divarea1') [($ (this) .val() == 'area1')? 'cacher': 'montrer'](); J'ai d'abord oublié le point-virgule arrière. Cela a peut-être causé certains des problèmes que je vivais. J'ai cependant essayé votre code et il fonctionne exactement ce que je cherchais. Merci beaucoup! –

+0

Si vous avez votre réponse, pourriez-vous s'il vous plaît fermer la question en cochant la case à côté du numéro, merci :) – Mottie

+0

comment cela fonctionnerait-il si vous le souhaitez, au chargement de la page, affiche la div correspondant à l'élément sélectionné du menu déroulant ? c'est-à-dire, je suis en train de définir l'élément sélectionné côté serveur, puis, lorsque la page est affichée, affiche le div approprié (tel qu'opposé à tous ou à aucun d'entre eux). Merci! –

3

@fudgey a donné une belle solution. mais ont peu de doute. Cela dépend de la valeur et de la nécessité de changer ID d'attribut de<div> à chaque fois.

Je ferais ce `

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