Cascading Dropdown in asp.net using Jquery

Question

I have a problem in my DropdownList in asp.net C# when I select a bank in my bankDDL, the branchDDL doesn't update automatically, It needs to be selected first before the branchDDL be updated. and Im using Jquery language to populate data on my branchDDL in runtime.

var branch = $("#<%=cboBranch.ClientID%>");

    $("#<%=cboBank.ClientID%>").change(function () {

        branch.html("");//this is my first problem this doesnt show after my bank is change
        branch.append($("<option></option>").val(-1).html("Please select Branch"));//also this
        if ($(this).val() != -1) {
            OnGetNotes(parseInt($(this).val()));//this function get the JSON and populate the
                                                //branch according to what bank is selected
                                                //and it show the branch using slideDown 
        }
        else {
            $("#branch").slideUp();
        }
    });

Answer 1

Instead of .html() use .empty() . Also make sure you have your code inside DOM ready event.. Try this

$(function() {

    var branch = $("#<%=cboBranch.ClientID%>");

    $("#<%=cboBank.ClientID%>").on('change', function() {
        branch.empty().append($("<option></option>").val(-1).html("Please select Branch")); //also this
        if ($(this).val() != -1) {
            OnGetNotes(parseInt($(this).val()));
        }
        else {
            $("#branch").slideUp();
        }
    });
});​