更改触发器上的Jquery/Ajax选择框

好的，我要做的是创建一个选择框列表，根据上面的内容更新每个框的值：

第一个是这样的：

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

当它的值发生更改时，将发送ajax请求，并使用POST html值更新"#stage_attendedSchoolDistrict"选项。

既然这一切都很好，现在我需要对"#stage_attendedSchoolDistrict"做同样的选择，所以：

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

问题是该事件根本不会触发。我认为这与以下事实有关：前者在页面的HTML中有值，而后者没有。我该如何解决？

欢迎提出任何建议，谢谢您的帮助。