ajax、jquery和筛选下拉列表

因此，我有两个jquery函数，它们向我的XHR服务传递一个键，以过滤列表的结果（未显示）。我不熟悉jquery（以及一般的web开发人员）。这两个函数是相同的（id标记除外）。我怎么能把这写得更干呢

  $('#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);
    });
  });

---

如果不选择使用类，则可以引用定义的函数，如下所示：

$('#id_group').change(function() {
    // Pass the element id to the defined function
    get_jobs( $( this ).attr( 'id' ) );
}
$('#id_location').change(function() {
    // Pass the element id to the defined function
    get_jobs( $( this ).attr( 'id' ) );
}

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

---

通过向jQuery传递自定义数据，可以使用事件对象 （此处记录） 并且有一个通用函数来完成这两项任务

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

---

我会对两者使用相同的事件处理程序，然后稍微更改后端

$(".get_selects").change(function () {
    var option = $(this).val();
    var type = $(this).attr("id");
    $.get('jobs/update/', {type: type, value: option}, function (data) {
        $('#jobs').html(data).hide().fadeIn(1000);
    });
});

我对HTML做了一些修改，所以请查看

---

Fiddle:

这是不正确的——一个案例使用

{location:option}

，另一个案例使用

{group:option}

。两次通话的参数相同。祝您愉快。令人震惊的是，有多少人懒得学习和使用eventObject。那家伙很有用。