SelectList values determined by previous SelectList Values

Question

What would I need to understand to implement two selectLists with the second dependent on the first? The make is selected which filters the engine sizes. This will eventually return the carDetails

public IActionResult Create()
{
      ViewData["MakeId"] = new SelectList(_context.Sport, "MakeId", "MakeName");
      ViewData["EngineId"] = new SelectList(_context.Venue, "EngineId", "EngineName");

      return View();
}

I have researched the "where" function but cannot see how to make it work with this scenario.

The view currently uses "cshtml" (Razor) files. An example of the contents is:

  <div class="form-group">
                <label asp-for="MakeId." class="control-label"></label>
                <select asp-for="MakeId" class="form-control" asp-items="ViewBag.MakeId"></select>
  </div>

it sounds like you want an onchange event for the first selectlist that marks an option as selected on the second selectlist based on the selection of the first. In the onchange event, you can perform whatever actions you need to determine the value in the second selectlist that should be selected (call to the server/db to query data, etc). — GregH, Nov 19 '18 at 15:53
You are looking for cacading dropdown behavior. Refer this [How to create cascading drop-down list](https://stackoverflow.com/a/46957086/40521) — Shyju, Nov 19 '18 at 16:11
Possible duplicate of [ASP.NET MVC - Cascading Drop Down](https://stackoverflow.com/questions/705540/asp-net-mvc-cascading-drop-down) — Mustapha Larhrouch, Nov 19 '18 at 16:12
Refer [this DotNetFiddle](https://dotnetfiddle.net/1bPZym) for implementing cascading dropdownlists — , Nov 19 '18 at 21:28

score 1 · Accepted Answer · answered Nov 19 '18 at 17:01

You can do it by having one select list being populated when the page loads. You can then allow the user to choose what thy want and have an onChange() on the dropdownlist that calls a javascript function.

You can now use an ajax call to call the controller and get the data to populate the second dropdownlist.

Your HTML for your dropdownlist should look something like this:

            <select class="form-control" data-val="true" id="AN ID" name="A NAME (NOT NEEDED)"></select>

In your success part of your ajax call you can do something like this:

            //Create a markup for a select
            var markup = "<option Value='0'>Select option</option>";

            //Populate the markup
            for (var i = 0; i < result.length; i++) {
                markup += "<option Value=" + result[i].Value + ">" + result[i].Text + "</option>";
            }

            //Populate dropdown with value
            $("#//DROPDOWNLIST ID").html(markup).show();

This will allow you to populate dropdownlists sequentially

I've edited the question to include some example of the view file. Is this method still possible with the cshtml file? — Unfitacorn, Nov 19 '18 at 23:08
@Unfitacorn It should be yes. So after in your first select simply have an onClick to call the javascript function. Do as I've shown you in the result of that ajax and populate the next like in the example — JamesS, Nov 20 '18 at 09:52

SelectList values determined by previous SelectList Values

1 Answers1