JQuery dropdown works on Firefox but not on Google Chrome

Question

First the code might suck as I'm new with JQuery. I have this html:

<select name="numberItems" id="id_numberItems"> 
<option value="1" selected="selected">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select>
<fieldset class="dropdownList"> 
     [...]
</fieldset>
<fieldset class="dropdownList"> 
     [...]
</fieldset>  <!-- This fieldset is repeated 5 times -->

This is my Jquery code:

// Dropdown
function dropDown(val) {
    $('.dropdownList').hide();
    $('.dropdownList:lt(' + val + ')').show();
}

$("#id_numberItems").click(function() { dropDown($('#id_numberItems').val()) });

This dropDown thing is working on Firefox, but not in Google Chrome ¿why? Thanks

Answer 1

Try using the change event.

Answer 2

Attach your dropDown-function to the change-event of your dropdown and it should work the way you want it (or as my crystal ball suggests me...)

$("#id_numberItems").change(function() { dropDown($('#id_numberItems').val()) });

example on jsbin.com