jQuery / Ajax选择框onChange触发器

Question

Ok, what i'm trying to do is to create a list of select boxes which update their value each depending on the above:

the first one is like that:

<script>

var $schoolRegion = $('#stage_attendedSchoolRegion');
$schoolRegion.change(function() {
  var $form = $(this).closest('form');
  var data = {};
  data[$schoolRegion.attr('name')] = $schoolRegion.val();
  $.ajax({
    url : $form.attr('action'),
    type: $form.attr('method'),
    data : data,
    success: function(html) {
      $('#stage_attendedSchoolDistrict').replaceWith(
        $(html).find('#stage_attendedSchoolDistrict')
      );
    }
  });
});

</script>

when it's value changes an ajax request is dispatched, and the choices of the "#stage_attendedSchoolDistrict" select are updated with the POST html value.

Since here's all good, now i need to do the same with the "#stage_attendedSchoolDistrict" select so:

<script>

var $schoolDistrict = $('#stage_attendedSchoolDistrict');
$schoolDistrict.on.change(function() {
  var $form = $(this).closest('form');
  var data = {};
  data[$schoolDistrict.attr('name')] = $schoolDistrict.val();
  $.ajax({
    url : $form.attr('action'),
    type: $form.attr('method'),
    data : data,
    success: function(html) {
      $('#stage_attendedSchoolCity').replaceWith(
        $(html).find('#stage_attendedSchoolCity')
      );
    }
  });
});

</script>

The problem is that the event doesn't trigger at all. I'm thinking it is related to the fact that the former has values in the HTML of the page while the latter doesnt. How can i solve?

Any suggestion is appreciated, thanks for the help.

Answer 1

您在第二个示例中调用的是.change，而不是第一个示例中的.change。