Cascading Dropdown

Syntax

$.ddCascading = function (targetId, url)

Arguments

targetId	String	Dropdown that will be populated based on selection of other dropdown list of values from server specified in “url”.
url	String	URI of the action that List is derived from

Description

Populates a Dropdown List whose content/items depends on the selection of a previously selected Dropdown element by sending an HTTPGET request to the action of the URI specified in “url” and loading the data from the Server into the Dropdown List specified in “targetId”.

To be able to use this feature, the Model of the webpage needs to contain a function along the lines of:

public List<SelectListItem> GetDD2Items(D DD1Selection, string id)
{
    var dd2List = new List<SelectListItem>();
    
    ...
    
    return dd2List;
}

This function needs to be called by the respective Action in the Controller, for example like this:

[HttpGet]
public JsonResult Dropdown(D dd1, string id)
{
     var model = new Model();
     return Json(model.GetDD2Items(dd1, id), JsonRequestBehavior.AllowGet);
 }

Example

The following program illustrates the function call:

$("#Dropdown1").change(function () {
    $.ddCascading("Dropdown2", "/main/dropdown/" + $(this).val());
})

When the selection of the first Dropdown List changes, function will change the content of the second Dropdown List by sending a request to the action of the URI “main/dropdown” along with the new selection of first Dropdown List as parameter.