Utilisation de .change() dans une liste déroulante

Question

J'ai une liste déroulante à laquelle je mets un autre événement. Voici comment je mon code HTML mis en place:

 <p> Please select a number: 
<select name="selectNumber" id="selectNumber"> 
    <option value="1" <%if (number.equals("1")) {%>selected<%}%>>1</option> 
    <option value="2" <%if (number.equals("2")) {%>selected<%}%>>2</option> 
    <option value="3" <%if (number.equals("3")) {%>selected<%}%>>3</option> 
    <option value="4" <%if (number.equals("4")) {%>selected<%}%>>4</option> 
    <option value="5" <%if (number.equals("5")) {%>selected<%}%>>5</option> 
    <option value="6" <%if (number.equals("6")) {%>selected<%}%>>6</option> 
</select> 
</p> 
<div id="orgDiv"> 
    <p> HELLO!! </p> 
</div> 

Et voici mon jQuery:

 $(document).ready(function() { 
     $('#orgDiv').hide() 
    }); 
    $('#selectNumber').change(function(){ 
     $('#orgDiv').show(); 
    }); 

Il cache évidemment la div lorsque le DOM est le chargement terminé. Le problème que j'ai est dès que je clique sur la liste déroulante ...... il montre la div. Il n'attend pas que je sélectionne quelque chose dans la liste déroulante. Y at-il un autre événement que je peux utiliser?

Answer 1

Vous devez écouter l'événement de modification dans le document prêt.

$(document).ready(function() { 
     $('#orgDiv').hide() 
     $('#selectNumber').change(function(){ 
     $('#orgDiv').show(); 
     }); 
    });