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

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

2 个答案: