How to fill dependent dropdownlist with jquery

Question

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("<option value = '"+row.StudentID+" '> "+row.StudentName+"</option>
}
}
})

Please help me find out why it is not working.

Thank you!

Rijwan Ansari · Answer

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

Sachin Singh · Answer

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

Schleid Alex · Answer

Thank you Sachin I have tried your solution dropdowlist is empty, not populated and I have syntax error in jquery