javascript - 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 元素