Question

I have a dropdown box that I am setting another event to. This is how I have my HTML set up:

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

And here is my jQuery:

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

So it obviously hides the div when the DOM is finished loading. The problem I am having is as soon as I click the dropdown box……it shows the div. It does not wait until I select something in the dropdown. Is there another event I can use?

Answer 1

You need to listen for the change event inside document ready.

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