Keyup alternative for dropdown boxes

Question

I've currently got a search field with id="activityField" such that whenever the user changes this field, an associated table updates. As far as I know, this is a result of a jQuery keyup():

$(document).on('keyup', '#tableFilter', function() {
        window.location.hash = $(this).val()
        $('.spotRow').first().click()
    })

However, I added a drop-down box with HTML <select id="activityFilter"> and I don't know how to duplicate the keyup() behavior. When I choose an option in the drop-down, nothing changes immediately, but if I hit space in the #tableFilter input field, the table updates as expected.

Is there some keyup() equivalent I can use on this drop-down menu?

Answer 1

You should use

$('#activityFilter option').on('click', function() {
   window.location.hash = $(this).val();
   $('.spotRow').first().click();
});

It may also be a good idea not to set your keyup listener on document. You should give all your input fields a common class, and listen on that class.

IE:

$('.myCommonClass').on('keyup', function() {
   window.location.hash = $(this).val();
   $('.spotRow').first().click();
});