How to fill dependent dropdownlist with jquery

Schleid Alex

I am trying to acheive this simple thing I have class dropdownlist that upon selection will fill another student dropdownlist, I am using jquery, below is my code

$('#ddClass').on('change', function () {
var ClassID = $('#ddlClass').val()
$.ajax({
url: 'StudentList',
type: 'GET',
contentType: 'apllication/html; charset=utf-8',
data: { ID: ClassID},
dataType: 'html',
success: function (result) {
$.each(result, function(index, row){
$('#ddlStudent).append(""+row.StudentID+" '> "+row.StudentName+"
}
}
})

Please help me find out why it is not working.

Thank you!

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rijwan Ansari5y ago
Hi,

You can try in this way
$('#ddClass').on('change', function () {
        var ClassID = $('#ddlClass').val()
        $.ajax({
            url: 'StudentList',
            type: 'GET',
            contentType: 'apllication/html; charset=utf-8',
            data: { ID: ClassID},
            dataType: 'html',
            success: function (result) {
            var s = 'Please Select a Student';
            for (var i = 0; i < result.length; i++) {

              console.log(result[i].StudentID + ' ' + result[i].StudentName);// for debug to check weather correct data is showing
              s += ' + result[i].StudentID + '">' + result[i].StudentName + '';
               }
            $("#ddlStudent").html(s);
        }
        })
0
Schleid Alex5y ago
Thank you Sachin
I have tried your solution dropdowlist is empty, not populated and I have syntax error in jquery
0
Sachin Singh5y ago
Test the below code and make sure you are getting data in success function.
success: function (result) {
               $(result).each(function (index, item) {
$('#ddlStudent').append($(', { value: item.StudentId, text: item.StudentName }));
                    });
        })
0