Such a situation I write a site on Asp.net MVC 5 is a form of creating an animal, there are two Select in one type of animal and in the second breed. Well, you need to implement so that when you change the first one, the second one loads in the second one. This is how I set these Selects by default.

<div class="form-group"> @Html.LabelFor(model => model.Type, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model.Type, ViewBag.type as SelectList) @Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Species, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model.Species, ViewBag.species as SelectList) @Html.ValidationMessageFor(model => model.Species, "", new { @class = "text-danger" }) </div> </div>

As I understand it, you need to do this either in jQuery, or in AJAX. But I do not know how to do it. Help please

    1 answer 1

    Here it is not a matter of selects, but the fact that you need to track the event of changing the value of the first drop-down list, in the handler function take its value, make a request to the server (AYAX), retrieve data on the server for the second drop-down list (select or else) and by success in the aux query fill in the second Ddl with the received values.

    On the client, something like this:

     @Html.DropDownListFor(model => model.Type, new SelectListItem[] { new SelectListItem() { Text = "Text1", Value = "0" }, new SelectListItem() { Text = "Text2", Value = "1" } }, new { @onchange="onChange(this.value)" }) <script> function onChange(val) { var typeVal = $('#Type').val() $.post( '@Url.Action("GetSpecies","Controller")', {typeVal : typeVal } function( data ) { var select = $("#Type"); select.empty(); $.each(data, function (index, itemData) { select.append($('<option/>', { value: data.Value, text: data.Text })); }); }); } </script>