JS Group Events

Question

I currently have four change() events that fire exactly the same code (see below), so I am wondering if there is a way to group these events on the same line in order to save the repeated code four times?

Thanks.

 /** Check for a change to any of the search dropdowns */ $('#job-roles').change(function(e){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') }); $('#ind-services').change(function(e){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') }); $('#bus-services').change(function(e){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') }); $('#indi-services').change(function(e){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') }); 

Answer 1

 $('#job-roles, #indi-services, #ind-services, #bus-services').change(function(e){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') }); 

Answer 2

Option 1 : give them all the same classes and attach to them all the events $('.someClass').change(...)

Option 2 Group the event: $('#job-roles, #ind-services, ... ').change(...)

Answer 3

Use class?

Give all elements the say doSomething class, and then use the following code to implement the listener:

 $('.doSomething').change(function(e){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') }); 

Answer 4

Another option, besides the excellent ones already described, is simply:

 (function(){ function doCoolStuff(){ letter = $_GET('staff_search'); initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>') } $('#job-roles').change(function(e){ doCoolStuff(); }); $('#ind-services').change(function(e){ doCoolStuff(); }); $('#bus-services').change(function(e){ doCoolStuff(); }); $('#indi-services').change(function(e){ doCoolStuff(); }); }());