dropdownlist parent child example

Loading child dropdownlist based one selected value of parent dropdownlist - is very common requirement in web application development, you come across many situation when you need it, for example, loading cities based on country selected, loading students based one class or section selected etc.

In below example we learn exactly how to solve that problem in mvc application. dropdownlist parent child example

Load Child dropdownlist in

Here in the example of loading child dropdownlist depending on value change parent dropdownlist using jQuery

Populate child dropdownlist using Jquery

Step 1: Create two dropdownlist in your page, one for country and one for state. Write below code in Razor view

@Html.DropDownListFor(m => m.CountryId,
new SelectList(ViewBag.Countries, "Value", "Text"),
"Select Country", new { data_url = Url.Action("GetStates") })
@Html.DropDownListFor(m => m.StateId,
new SelectList(ViewBag.States, "Value", "Text"),
"Select State")

Step 2: Write a method in controller which will return JsonResult of states, so that can be consumed using jquery , and populate the state list

public JsonResult GetStates(int countryId)
    IEnumerable<tbState> states = _SecurityService.GetStates(countryId);
    return Json(states, JsonRequestBehavior.AllowGet);

Step 3: now lets look at the script, where we get the JSON result and populate the state dropdownlist

    $(document).ready(function () {

        $('#CountryId').change(function () {
            var url = $(this).data('url');

            var data = { countryId: $(this).val() };

            $.getJSON(url, data, function (GetStates) {
                var ddlState = $('#StateId');
                ddlState.append($('<option/>', {
                    value: 0,
                    text: "Select State"

                $.each(GetStates, function (index, StateObj) {
                    ddlState.append($('<option/>', {
                        value: StateObj.StateId,
                        text: StateObj.State

Enjoy populating dropdownlist using jQuery in mvc

Make sure you have included right jquery reference in your page, because on-changed event call is made using jquery, so right jquery reference is required. dropdownlist parent child example
Aspnet MVC Training MVC tutorials, learn model view controllers with c#, develop database driven web application using MVC framework.
Hire .Net Developer
Free Tutorials
ASP.NET MVC Interview Questions Answers
Asp.Net MVC C# Examples | Join Asp.Net MVC Course | Core Tutorial