Fill in DropDown / Select based on the value selected on another DropDown

Question

I am a novice developer, but I came across a case that I cannot solve. I am using ASP.NET MVC with C # plus some javascript (jQuery, JSON ...).

I need to populate a dropdown based on the value selected in another. It seems simple (and I know it), but this particular case eludes me. I have lost many hours and I am still banging my head. If anyone can help, I will be very grateful.

My code is as follows:

I have an object of the class "Task", which has both phase and order. Orders available to the user in the second drop-down list will depend on the phase in which this task was set in the drop-down list. The order is just Int32 (the order from the order is in the schedule, and not in the business order)

The first DropDown uses this IF to check if the session is null, then it processes the default message or brings the selected default value.

<% 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 in many ways similar to the first, but its SelectList is a list of lists. Each list contains the options for each choice in the first DropDown. There will not be many, so do not 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"})%> <%} %> 

Now the question arises: how to get the second DropDown to change its values ​​based on the selected value in the first DropDown? I am very poorly versed in JavaScript (started to learn, though). We use jQuery, JSON in the project.

Thank you in advance for your attention.

Answer 1

Basically you want to attach a javascript event to the first drop list and query the jquery web service (or another) to get information about this identifier. Then in javascript you will re-display the second list with the available options. A good example is here . An example Javascript instance is shown 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); }); }); }); 

Answer 2

You need to catch the first DropDown change event. and in this filling / select the desired value.

 $('#Phase_ID').change(function(){ var t = $(this); $('#Order_ID').val(t.val()); // this is only for example. }); 

Answer 3

There is a good tutorial on how to do this. Stephen Walter

it should be easy to do