Afficher/Masquer plusieurs DIVs avec Sélectionnez à l'aide de jQuery

Je ont essentiellement la même situation que la personne en question est la suivante:

Lien: comment faire pour afficher/masquer les divs par sélectionner.(jquery)

Grâce à une vaste recherche dans Google, j'ai été en mesure de venir avec plusieurs différentes méthodes dans lequel les gens se réclamer de leur méthode fonctionne. Je n'ai pas encore d'obtenir tout fonctionne correctement encore. Je ne sais pas encore assez sur jQuery pour bien comprendre comment écrire ce à partir de zéro, j'ai donc compter sur de très bons exemples pour l'instant.

Ce que j'ai essayé de travailler avec (basé sur les exemples que j'ai trouvé et essayé):

<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 des supports plutôt que le moins-et plus-que les panneaux de signalisation de code html permettant d'afficher correctement ce message.

Ce que j'obtiens quand je test ceci:

Lors du premier chargement si rien n'est sélectionné => Pas de DIV, c'est afficher.
Lorsque je sélectionne DIV Zone 1 => DIV Zone 2 et 3 sont affichés.
Lorsque je sélectionne DIV Zone 2 => DIV Zone 1 et 3 sont affichés.
Lorsque je sélectionne DIV Domaine 3 => DIV Zone 1 et 2 sont affichés.

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

Pas de réponse à votre question, mais d'explorer jQuery#basculer méthode conditionnelle cacher/montrer.

OriginalL'auteur | 2009-09-11

10

Je le ferais:
```
<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>
```
Après la lecture de votre code, j'ai réalisé que dans mon trois lignes telles que: ('#divarea1')[ ($(this).val() == 'euro1') ? 'cacher' : 'afficher' ](); au départ, j'ai oublié le point à la semi-colon. Ce qui peut avoir causé certains problèmes que je vivais. J'ai cependant essayé ton code et c'est la scène exactement ce que je cherchais. Merci!!!!
Si vous avez votre réponse, pourriez-vous s'il vous plaît fermer la question en cochant la case en regard du nombre, merci 🙂
comment serait-ce de travailler si l'on veut, au chargement de la page, afficher le div correspondant à la liste déroulante de l'élément sélectionné? c'est, je suis de réglage de l'élément sélectionné côté serveur, puis quand la page est affichée, preuve de div (comme oppposed à tous ou aucun d'entre eux). Merci!
Richman: Si vous ajoutez un attribut sélectionné pour l'option serveur de côté, puis il suffit d'ajouter en-dessous de la $('.box').hide(); ligne (à l'intérieur du document prêt de la fonction).... $('#div' + $('#dropdown').val()).show();

OriginalL'auteur Mottie

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

Donc je le ferais
`

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

OriginalL'auteur Bit Curios

1

Swap afficher/masquer, de sorte qu'il ressemble à ceci:
```
$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()
```
Je m'excuse pour ne pas attraper cette quand j'ai posté... Dans mon code de travail, le dollar signes sont présents. Ils doivent avoir été dépouillée lorsque j'ai posté mon code.

OriginalL'auteur T. Stone
1

Ce code est un peu succincte:
```
$(document).ready
(
  function()
  {
    $("div.box").hide();
    $("#dropdown").change
    (
      function()
      {
        var selectedValue = $(this).val();
        if(selectedValue !== "0")
        {
          $("div.box").show();
          $("#div" + selectedValue).hide();
        }   
      }   
    );
  }
};
```
Essentiellement, si il y a une valeur sélectionnée (c'est à dire, l'option n'est pas définie à "Choisir"), puis tous les div.des éléments de la boîte sont affichés. Le DIV correspondant à l'option sélectionnée est alors caché. Cela devrait arriver assez rapidement à ce que le flash n'est pas perceptible.

Vous avez peut-être mal compris. Je ne veux pas que l'un QUELCONQUE des éléments DIV être affiché au départ à tous. Je veux seulement UN être affichée une fois que la sélection a été faite.
Subvention: N'a pas d' $("div.boîte").hide() les éléments au chargement de la page?

OriginalL'auteur David Andres

Vous devez vous connecter pour publier un commentaire.