Question

I’m a beginner developer but I stumbled across a case I can’t solve.
I’m using ASP.NET MVC with C# plus some javascript (JQuery, JSON…).

What I have to do is to populate a dropdown based on the value chosen in other.
It seems simple (and I know it is) but this particular case is eluding me.
I’ve lost many hours and I’m still bonking my head. If anyone can help I’d be very grateful.

My code is as follows:

I have an object of the class “Task” that have both a Phase and an Order. The Orders available to the user in the second dropdown will depend on the Phase this Task was assigned to in the firts dropdown. Order is merely an Int32 (order from ordering in a schedule, not from business order)

The First DropDown uses this IF to check if a session is null, then procedes to show a default message or bring a selected value as default.

<%
 if (TempData["TaskObject"] != null)
    {
        var Phases = new SelectList(ViewData["phaseList"] as List<Phase>, "Phase_ID", "Phase_Name", ((Task)TempData["TaskObject"]).Phase_ID.ToString());

    %>
        <%=Html.DropDownList("Phase_ID", Phases, new { @class = "textbox"})%>
   <%}%>
   <%else
      {%>
        <%=Html.DropDownList("Phase_ID", (new SelectList((List<Phase>)ViewData["phaseList"], "Phase_ID", "Phase_Name")),
                                                 "Please Choose...",
                                                 new { @class = "textbox"})%>
    <%} %>

The second DropDown is much like the first, but its SelectList is a list of lists. Each list contais the possible choices for each choice in the first DropDown. There won’t be many, so don’t worry about it.

<%if (TempData["TaskObject"] != null)
    {
        var orderList = (ViewData["orderList"] as List<List<int>>)[0]; 
        var orders = new SelectList(orderList, ((Task)TempData["TaskObject"]).Phase_ID.ToString());

 %>
       <%=Html.DropDownList("Order_ID", orders, new { @class = "textbox"})%>
  <%}%>
<%else
    {%>
        <%=Html.DropDownList("Order_ID", (new SelectList((List<int>)ViewData["phaseList"], "Phase_ID", "Phase_Name")),
                                            "Please Choose...",
                                            new { @class = "textbox"})%>
  <%} %>

The question now is: how do I make the second DropDown change its values based on the selected value in the first DropDown ? I’m very poor at JavaScript (started studying though). We’re using JQuery, JSON at the project.

Thanks in advance for your atention.

Answer 1

You basically want to attach a javascript event onto the first drop list and have jquery query a web service (or other) to get the details for that ID. Then in javascript you re-render the second drop list with the available options. A pretty good example is here. Javascript extract from the example is below:

$(function() {
        $.getJSON("/Home/Countries/List", function(data) {
            var items = "---------------------";
            $.each(data, function(i, country) {
                items += "" + country.Text + "";
            });
            $("#Countries").html(items);
        });

    $("#Countries").change(function() {
        $.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {
            var items = "---------------------";
            $.each(data, function(i, state) {
                items += "" + state.Text + "";
            });
            $("#States").html(items);
        });
    });
});