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!