8
votes

Afficher / masquer plusieurs divs avec Sélectionner avec jQuery

J'ai essentiellement la même situation que la personne dans la question suivante:

link: Comment montrer / masquer les divs par SELECT. (JQuery)

Par la recherche approfondie de Google, j'ai pu proposer plusieurs méthodes différentes dans lesquelles les gens revendiquent leur méthode travaux. Je n'ai pas encore besoin de travailler correctement. Je ne sais pas encore assez sur JQuery pour bien comprendre comment écrire ceci à partir de zéro, je compte donc sur de très bons exemples pour l'instant.

Qu'est-ce que j'ai essayé de travailler (basé sur des exemples i "VE trouvé et essayé) est-ce: xxx

Remarque: j'utilise des crochets plutôt que moins que et plus grand que des signes autour de HTML à afficher correctement dans ce message.
Qu'est-ce que je reçois lorsque je teste ceci:
- sur la première charge sans rien sélectionné => No Div est affiché.
- Lorsque je sélectionne la zone div 1 => La zone DIV 2 et 3 sont affichées.
- Lorsque je sélectionne la zone DIV 2 => la zone DIV 1 et 3 sont affichées.
- Quand je sélectionne la zone div 3 => la zone div 1 et 2 sont affichées.
  Mon cerveau est frit pour la journée. Que puis-je faire pour résoudre ce problème?

jquery html select hide show

1 commentaires

Pas une réponse à votre question, mais explorez la méthode JQuery # Basculer pour masquer / spectacle conditionnel.

4 Réponses :

1
votes

Swap show / cachet de sorte qu'il ressemble à ceci: xxx

1 commentaires

Je m'excuse de ne pas avoir attrapé cela lorsque je posté à l'origine ... dans mon code de travail, les signes dollar sont présents. Ils doivent avoir été dépouillés lorsque j'ai posté mon code.

1
votes

Ce code est un peu plus succinct: xxx

essentiellement, s'il existe une valeur sélectionnée (c'est-à-dire que l'option n'est pas définie sur "Choisir"), puis tous les éléments de div.box sont indiqués. La div correspondant à l'option sélectionnée est alors cachée. Cela devrait se produire assez rapidement de manière à ce que le flash ne soit pas perceptible.

2 commentaires

Vous avez peut-être mal compris. Je ne veux pas que aucun des éléments div éléments soit montré initialement du tout. Je veux seulement que l'un soit affiché une fois qu'une sélection a été faite.

@Thomas Grant: Ne pas $ ("div.box"). Masquer () les éléments de la page charge?

10
votes

Je ferais cela:

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

4 commentaires

Après avoir lu votre code suggéré, j'ai compris que dans mes trois lignes telles que: ('# divarea1 ») [($ (ceci) .val () ==' zone1 ')? "masquer": "montrer"] (); J'ai initialement oublié le semi-deux traînant. Cela peut avoir causé certains des problèmes que j'avais connus. J'ai toutefois essayé votre code et cela effectue exactement ce que je cherchais. Merci!

Si vous avez votre réponse, pourriez-vous fermer la question en cochant la marque à côté du numéro, merci :)

Comment cela fonctionnerait-il si vous le souhaitez, à la page charge, indiquez la div correspondant à l'élément sélectionné de la liste déroulante? C'est-à-dire que je définit le côté du serveur d'élément sélectionné, puis lorsque la page est rendue, indiquez la DIV appropriée (comme opposée à tous ou aucun d'entre eux). Merci!

@Mark Richman: Si vous ajoutez un attribut sélectionné au côté du serveur d'option, il suffit d'ajouter ceci ci-dessous le $ ('. Boîte'). Masquer (); Ligne (à l'intérieur de la fonction Document Ready). ... $ ('# div' + $ ('# dropdown'). Val ()). spectacle ();


                        
                                            
                            
                                
                                    3
 votes
                                
                            
                            
                                
                                     @fudgey a donné une belle solution. Mais avoir peu de doute. Cela dépendra de la valeur et de la nécessité de changer  Attribut ID de   
  à chaque fois.  alors je ferais cela
    `  xxx                                  


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                    
            

            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        
                        
                                            
                            datetimepicker ne fonctionne pas avec bootstrap 4?                        
                        
                                            
                            L'appel Ajax n'affiche pas de réponse en cas de succès                        
                        
                                            
                            django admin - Comment ajouter du javascript à la fin d'un fichier