---
title: "How we load a dropdown field on the base of other Dropdown field selected value???"  
description: "How we load a dropdown field on the base of other Dropdown field selected value???"  
author: "Asif khan"  
published: 2015-11-27  
updated: 2015-11-27  
canonical: https://www.mindstick.com/forum/33648/how-we-load-a-dropdown-field-on-the-base-of-other-dropdown-field-selected-value  
category: ".net"  
tags: ["asp.net mvc"]  
reading_time: 4 minutes  

---

# How we load a dropdown field on the base of other Dropdown field selected value???

No [Content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand)

## Replies

### Reply by Anonymous User

Step 1.Create a model

```
 public class Model    {        public class CountryModel        {            public List<State> StateModel { get; set; }            public SelectList FilteredCity { get; set; }        }        public class State        {            public int Id { get; set; }            public string StateName { get; set; }        }        public class City        {            public int Id { get; set; }            public int StateId { get; set; }            public string CityName { get; set; }        }    }
```

Step 2. Now add a controller to this

```
public class HomeController : Controller    {        //        // GET: /Home/        public ActionResult Index()        {            LoadDropDown.Models.Model.CountryModel objcountrymodel = new LoadDropDown.Models.Model.CountryModel();            objcountrymodel.StateModel = new List<LoadDropDown.Models.Model.State>();            objcountrymodel.StateModel = GetAllState();            return View(objcountrymodel);        }        //Action result for ajax call        [HttpPost]        public ActionResult GetCityByStaeId(int stateid)        {            List<LoadDropDown.Models.Model.City> objcity = new List<LoadDropDown.Models.Model.City>();            objcity = GetAllCity().Where(m => m.StateId == stateid).ToList();            SelectList obgcity = new SelectList(objcity, "Id", "CityName", 0);            return Json(obgcity);        }        // Collection for state        public List<LoadDropDown.Models.Model.State> GetAllState()        {            List<LoadDropDown.Models.Model.State> objstate = new List<LoadDropDown.Models.Model.State>();            objstate.Add(new LoadDropDown.Models.Model.State { Id = 0, StateName = "Select State" });            objstate.Add(new LoadDropDown.Models.Model.State { Id = 1, StateName = "State 1" });            objstate.Add(new LoadDropDown.Models.Model.State { Id = 2, StateName = "State 2" });            objstate.Add(new LoadDropDown.Models.Model.State { Id = 3, StateName = "State 3" });            objstate.Add(new LoadDropDown.Models.Model.State { Id = 4, StateName = "State 4" });            return objstate;        }        //collection for city        public List<LoadDropDown.Models.Model.City> GetAllCity()        {            List<LoadDropDown.Models.Model.City> objcity = new List<LoadDropDown.Models.Model.City>();            objcity.Add(new LoadDropDown.Models.Model.City { Id = 1, StateId = 1, CityName = "City1-1" });            objcity.Add(new LoadDropDown.Models.Model.City { Id = 2, StateId = 2, CityName = "City2-1" });            objcity.Add(new LoadDropDown.Models.Model.City { Id = 3, StateId = 4, CityName = "City4-1" });            objcity.Add(new LoadDropDown.Models.Model.City { Id = 4, StateId = 1, CityName = "City1-2" });            objcity.Add(new LoadDropDown.Models.Model.City { Id = 5, StateId = 1, CityName = "City1-3" });            objcity.Add(new LoadDropDown.Models.Model.City { Id = 6, StateId = 4, CityName = "City4-2" });            return objcity;        }    }
```

Step 3. Create a view and bind it to controller.\

```
@model LoadDropDown.Models.Model.CountryModel<title>Home</title><script language="javascript" type="text/javascript">    function GetCity(_stateId) {        var procemessage = "<option value='0'> Please wait...</option>";        $("#ddlcity").html(procemessage).show();        var url = "/Home/GetCityByStaeId/";        $.ajax({            url: url,            data: { stateid: _stateId },            cache: false,            type: "POST",            success: function (data) {                var markup = "<option value='0'>Select City</option>";                for (var x = 0; x < data.length; x++) {                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";                }                $("#ddlcity").html(markup).show();            },            error: function (reponse) {                alert("error : " + reponse);            }        });    }</script>@using (Html.BeginForm()){    @Html.DropDownListFor(m => m.StateModel, new SelectList(Model.StateModel, "Id", "StateName"), new { @id = "ddlstate", @style = "width:200px;", @onchange = "javascript:GetCity(this.value);" })    <br />    <br />    <select id="ddlcity" name="ddlcity" style="width: 200px">    </select>    <br />    <br />}
```

\
Thanks.


---

Original Source: https://www.mindstick.com/forum/33648/how-we-load-a-dropdown-field-on-the-base-of-other-dropdown-field-selected-value

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.