MVC Dropdown onchange load another dropdown

Question

5.00/5 (2 votes)

See more:

hi i have two dropdownlist on a page i want that when i select some value from first dropdown list then in second dropdownlist all the values load according to the value selected
both dropdown lists are binded dynamically

View
First Dropdown

C#

@Html.DropDownList("Departments",dept,"--Select Department--",new { @required="required" })

Second Dropdown

C#

@Html.DropDownList("Physician", phy, "--Select Physician--", new { @required="required" })

Function to Bind values

C#

public List<SelectListItem> Departments()
        {
            List<SelectListItem> dept = new List<SelectListItem>();
            var query = from u in db.Departments select u;
            if (query.Count() > 0)
            {
                foreach (var v in query)
                {
                    dept.Add(new SelectListItem { Text = v.Name, Value = v.ID.ToString() });
                }
            }
            return dept;
        }

C#

public List<SelectListItem> Physicians()
        {
            List<SelectListItem> phy = new List<SelectListItem>();
            var query = from u in db.Physicians select u;
            if (query.Count() > 0)
            {
                foreach (var v in query)
                {
                    phy.Add(new SelectListItem { Text = v.FirstName + " " + v.LastName, Value = v.ID.ToString() });
                }
            }
            return phy;
        }

Posted 14-Dec-13 9:07am

Mohsin Mustufa

Updated 30-Jan-18 5:44am

Add a Solution

2 solutions

Solution 4

This site helped me a lot, so i am giving back something. cheers ! This code works without any error.Thanks
JavaScript

HTML

<pre>    <script type="text/javascript">
     $(document).ready(function () {
         $("#Typeid").change(function () {
             var dID = $('#Typeid option:selected').val();
             $.getJSON("../Manage/GETSubType", { Typeid: dID },
                    function (data) {
                        var select = $("#subtypeid");
                        select.empty();
                        select.append($('<option/>', {
                            value: 0,
                            text: "Select project sub-types"
                        }));
                        $.each(data, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
         });
});

        </script>

Controller

C#

[AcceptVerbs(HttpVerbs.Get)]
    public JsonResult GETSubType(string Typeid)
    {

        dbproject = new DbProject();


          return Json(dbproject.ProjectType_SubTypeList(Convert.ToDouble( Typeid)), JsonRequestBehavior.AllowGet);

    }

Method in class

C#

<pre>  public List<SelectListItem> ProjectType_SubTypeList(double id)
        {
            var subtypes = from u in db.SubType where u.ProjectTypeID==id.ToString()  select u;
            List<SelectListItem> ProjectsubTypes = new List<SelectListItem>();
            ProjectsubTypes.Clear();
         //   ProjectsubTypes.Add(new SelectListItem { Text = "--Select Project sub-Type--", Value = "0" });
            if (subtypes!=null)
            {
                foreach(var subtype in subtypes)
                {
                    ProjectsubTypes.Add(new SelectListItem { Text = subtype.name, Value = subtype.id.ToString() });
                }
            }
            return ProjectsubTypes;
        }

HTML

View
<pre> <div class="form-group">
                        <div class="form-group col-md-6 col-sm-6 col-xs-12 has-feedback">
                            @Html.DropDownListFor(model => model.Project.ProjectType, new SelectList(ViewBag.Type as System.Collections.IEnumerable, "Value", "Text"), new { @class = "form-control", @id = "Typeid" })
                            @Html.ValidationMessageFor(model => model.Project.ProjectType, "", new { @class = "text-danger" })
                        </div>
                  <div class="form-group col-md-6 col-sm-6 col-xs-12 has-feedback">
                            @Html.DropDownListFor(model => model.Project.SubProjectID, new SelectList(Enumerable.Empty<SelectListItem>(), "id", "name"),
                            "Select project sub-types", new { @class = "form-control", @id = "subtypeid" })
                            @Html.ValidationMessageFor(model => model.Project.SubProjectID, "", new { @class = "text-danger" })
                        </div>
                    </div>

Posted 30-Jan-18 5:44am

Member 13608851

Comments

Member 13663829 14-Oct-20 7:57am

it give me load of error

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Hammad · Accepted Answer · 2013-12-14T20:16:00

JavaScript

<script type="text/javascript">
     $(document).ready(function () {
         $("#departmentList").change(function () {
             var dID= $(this).val();             
             $.getJSON("../Home/LoadPhysiansByDepartment", { deptId: dID },
                    function (data) {
                        var select = $("#physiciansList");
                        select.empty();
                        select.append($('<option/>', {
                            value: 0,
                            text: "Select a Physian"
                        }));
                        $.each(data, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
         });
});

In View You Write

C#

@Html.DropDownListFor(Model => Model.Departments, new SelectList(ViewBag.Departments as System.Collections.IEnumerable, "ID", "Name"),

            "Select a Student", new { id = "departmentList" })
        
        <p>
            @Html.DropDownListFor(Model => Model.Physicans, new SelectList(Enumerable.Empty<SelectListItem>(), "phyID", "phyName"),
            "Select a Physican", new { id = "physiciansList" })
        </p>

And In Controller

C#

public ActionResult Index()
{
List<SelectListItem> dept = new List<SelectListItem>();
            var query = from u in db.Departments select u;
            if (query.Count() > 0)
            {
                foreach (var v in query)
                {
                    dept.Add(new SelectListItem { Text = v.Name, Value = v.ID.ToString() });
                }
            }
            ViewBag.Departments = dept;
return View();
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadPhysiansByDepartment(string deptId)
{
//Your Code For Getting Physicans Goes Here
   var phyList = this.GetPhysicans(Convert.ToInt32(deptId));


   var phyData = classesList.Select(m => new SelectListItem()
    {
       Text = m.phyName,
       Value = m.phyId.ToString(),
    });
       return Json(phyData , JsonRequestBehavior.AllowGet);
}

syntax may be not correct because currently i have no visual studio but the idea is correct you can correct syntax in your side