jquery for Cascading Dropdown in MVC3

Question

I'm working in Asp.net MVC3. I'm using two DropdownList which are Vertical and Account . Based on the selection of Vertical, Account DropdownList should get visible and populated with data according to the Vertical selection. How could do this using JQuery ?

I'm using following code and got the Accountvalues based on the selection of Vartical. What I have to give in success function of Ajax call to make the Account DropdownList visible and populated with values.

$(document).ready(function () {
    $("#vertical").change(function (e) {
        var vertical = $("#vertical").val();
        cascadingdropdown(vertical);
    });
});


function cascadingdropdown(vertical) {
    $("#account").empty();
    $("#account").append("<option value='0'></option>");

    $.ajax({
        url: '@Url.Action("Account","Home")',
        dataType: 'json',
        data: {
            vertical: vertical
        },
        success: function (data) {

        }
    });
}

Answer 1

Assuming that you are returning json data, than you would do something like this:

var jsonData = $.parseJSON($(data).text());
 for (var i = 0; i < jsonData.length; i++){
  listItems+= "<option value='" + jsonData[i].Value + "'>" + jsonData[i].Text + "</option>";
}
$("#account").html(listItems);
$("#account").show();

For this to be a complete answer, you need to give an example of data returned from server. Otherwise this is more or less pseudo code...