Question

So i have these two jquery functions which pass my XHR service a key to filter the results of my list (not shown). I’m new to jquery(and web dev in general). These two functions are %90 the same (except for the id tags). How could I re-write this to be more DRY-like?

  $('#id_group').change(function() {
    var option = $(this).val();
    $.get('jobs/update/', {group:option}, function(data) {
      $('#jobs').html(data).hide().fadeIn(1000);
    });
  });

  $('#id_location').change(function() {
    var option = $(this).val();
    $.get('jobs/update/', {location:option}, function(data) {
      $('#jobs').html(data).hide().fadeIn(1000);
    });
  });

Answer 1

By passing custom data to jQuery you can make use of the event object
(documented here http://api.jquery.com/category/events/event-object/)
and have one generic function to do both tasks.

 function doGet(e) {
    var option = $(e.target).val();
    $.get('jobs/update/',e.data, function(data) {
      $('#jobs').html(data).hide().fadeIn(1000);
    });

 $('#id_group').change( {group:option}, doGet);

 $('#id_location').change({location:option}, doGet);