Jquery Dropdown Affichage par défaut Div

Question

je les suivantes JQuery, je veux afficher le divarea1 par défaut visible lorsque l'utilisateur accède à la page, je suis novice de Jquery de sorte que toute aide serait super.

Meilleur SPS

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.box').hide(); 
     $('#dropdown').change(function() { 
      $('.box').hide(); 
      $('#div' + $(this).val()).show(); 
     }); 
    }); 
</script> 


<select id="dropdown" class="boxformwh" name="dropdown"> 
    <option style="margin:20px;" value="area1"><b>DIV Area 1</b></option> 
    <option style="margin:20px;" value="area2"><b>DIV Area 2</b></option> 
    <option style="margin:20px;" value="area3"><b>DIV Area 3</b></option> 
</select> 


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

Answer 1

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.box').hide(); 
     $('#divarea1').show(); 
     $('#dropdown').change(function() { 
      $('.box').hide(); 
      $('#div' + $(this).val()).show(); 
     }); 
    }); 
</script> 

Answer 2

Vous avez juste besoin de déclencher le gestionnaire change de la charge de la page ainsi, comme ceci:

$(document).ready(function() { 
    $('.box').hide(); 
    $('#dropdown').change(function() { 
    $('.box').hide(); 
    $('#div' + $(this).val()).show(); 
    }).change(); 
}); 

You can give it a try here, appelant .change() sans aucun argument est un raccourci vers .trigger('change') qui va exécuter le gestionnaire que vous venez de lier ... donc il utilisera la valeur initiale de la liste déroulante sur le chargement de la page.

Answer 3

Vous collez explicitement tous les éléments .box, vous devez donc afficher l'élément divarea1 explicitement. Le onchange sera comme prévu.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.box').hide(); 
     $('.box:first').show(); 
     $('#dropdown').change(function() { 
      $('.box').hide(); 
      $('#div' + $(this).val()).show(); 
     }); 
    }); 
</script> 

Changé pour montrer la première .box div, qui n'a pas été lié à un div spécifique et montrera d'abord.