多个函数用于jquery中下拉列表的同一更改事件

Question

我有3个下拉列表。1用于选择部门。二是选题。此下拉列表应根据部门下拉列表进行填充。三是学生下拉。这也应该根据部门下拉列表进行填充。我该如何执行此操作？有帮助吗？

 $(function () {
        var items = '<option>Select Subject</Option>';
        $('#DepartmentID').change(function () {

            $.getJSON('/Mark/SubjectList/' + $('#DepartmentID').val(), function (data) {

                $.each(data, function (i, subject) {
                    items += "<option value='" + subject.Value + "'>" + subject.Text + "</option>";
                });
                alert("changed");
                $('#SubjectID').html(items);
            });

        });
    });


$(function () {
        var items = '<option>Select Subject</Option>';
        $('#DepartmentID').change(function () {

            $.getJSON('/Mark/StudentList/' + $('#DepartmentID').val(), function (data) {

                $.each(data, function (i, student) {
                    items += "<option value='" + student.Value + "'>" + student.Text + "</option>";
                });

                $('#StudentID').html(items);
            });

        });
    });

这是我想要组合的两个函数。

Answer 1

只需将这两个AJAX调用放在一个用于DepartmentID的更改处理程序中

$(function () {
    $('#DepartmentID').change(function () {

        $.getJSON('/Mark/SubjectList/' + $('#DepartmentID').val(), function (data) {

            var items = '<option>Select Subject</Option>';
            $.each(data, function (i, subject) {
                items += "<option value='" + subject.Value + "'>" + subject.Text + "</option>";
            });
            alert("changed");
            $('#SubjectID').html(items);
        });


        $.getJSON('/Mark/StudentList/' + $('#DepartmentID').val(), function (data) {

            var items = '<option>Select Subject</Option>';
            $.each(data, function (i, student) {
                items += "<option value='" + student.Value + "'>" + student.Text + "</option>";
            });

            $('#StudentID').html(items);
        });

    });
});

(注意:我还在每个回调函数中移动了var items = ...位，因此它们都有自己的变量。我怀疑其中一个应该是“选择学生”)

这段代码现在会在DepartmentID下拉列表发生变化时发出2个AJAX请求，并填充2个不同的select元素

Answer 2

只需这样组合：

$(function () {
  var items = '<option>Select Subject</Option>';
  $('#DepartmentID').change(function () {
    $.getJSON('/Mark/SubjectList/' + $('#DepartmentID').val(), function (data) {
      $.each(data, function (i, subject) {
        items += "<option value='" + subject.Value + "'>" + subject.Text + "</option>";
      });
      alert("changed");
      $('#SubjectID').html(items);
    });
  });
  var stuitems = '<option>Select Subject</Option>';
  $('#DepartmentID').change(function () {
    $.getJSON('/Mark/StudentList/' + $('#DepartmentID').val(), function (data) {
      $.each(data, function (i, student) {
        stuitems += "<option value='" + student.Value + "'>" + student.Text + "</option>";
      });
      $('#StudentID').html(stuitems);
    });
  });
});