CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
user5038976
user5038976

Reputation:

more than one function for same change event of drop down list in jquery

I have 3 drop down list. 1 is for selecting department. second is selecting subject. this drop down should be populated based on department drop down. third is student drop down. this should also populated based on department drop down. how can i perform this? Any help???

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

        });
    });

these are the two functions that I want to combine.

Upvotes: 0

Views: 989

Answers (2)

Jamiec
Jamiec

Reputation: 136114

Just put both AJAX calls within one change handler for 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);
        });

    });
});

(Note: I did also move the var items = ... bit inside each respective callback function so they each have their own variable. I suspect one was supposed to say "Select Student")

This code will now make 2 AJAX requests whenever DepartmentID dropdown is changed, a populates 2 different select elements

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Just combine this way:

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

Upvotes: 0

Related Questions