Cascading population of a mvc dropdown

Question

I have 2 DropDowns in an MVC application. Trying to populate the second one based on the first one's chosen value (Cascading).. Since I am rather new to MVC this is giving me a little problem.. This is how ot looks in my View..

I am getting the data based on the selection in the first DropDown

This is the JS code for retriving the data..

<script type="text/javascript">

        $('#AllShips').change(function () {
            var selectedShip = $("#AllShips").val();
            console.log(selectedShip);
            var arrivalSelect = $('#AllShipArrivals');
            arrivalSelect.empty();
            if (selectedShip != null && selectedShip != '') {
                $.getJSON('@Url.Action("GetArrivals")', { ShipID: selectedShip }, function (arrivals) {
                    console.log(arrivals);
                    if (arrivals != null && !jQuery.isEmptyObject(arrivals))
                    {
                        arrivalSelect.append($('<option/>', {
                            value: null,
                            text: ""
                        }));
                        $.each(arrivals, function (index, arrival) {
                            console.log(arrival.Value);
                            console.log(arrival.Text);
                            arrivalSelect.append($('<option/>', {
                                value: arrival.Value,
                                text: arrival.Text
                            }));
                        });
                    };
                });
            }
        });

Here is my HTML

<div class="col-lg-2 form-group">
                            @Html.LabelFor(model => model.AllShips, htmlAttributes: new { @class = "control-label col-md-12" })
                            <div class="col-md-12">
                                @if (Model.AllShips != null)
                                {
                                    @Html.DropDownListFor(model => model.ShipID, Model.AllShips, new { @class = "form-control", id = "AllShips" })
                                    @Html.ValidationMessageFor(model => model.ShipID, "", new { @class = "text-danger" })
                                }
                            </div>
                        </div>
                        <div class="col-lg-2 form-group">
                            @Html.LabelFor(model => model.AllShipArrivals, htmlAttributes: new { @class = "control-label col-md-12" })
                            <div class="col-md-12">
                                @if (Model.AllShipArrivals != null)
                                {
                                    @Html.DropDownListFor(model => model.ArrivalId, Model.AllShipArrivals, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.ArrivalId, "", new { @class = "text-danger" })
                                }
                                else
                                { @Html.DropDownListFor(model => model.ArrivalId, null, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.ArrivalId, "", new { @class = "text-danger" })}
                            </div>
                        </div>

Still the second DropDown is not changing (initially I populate it with a list of all Arrivals, yes I know..not a good option)

Any idea what I am doing wrong here??

score 1 · Accepted Answer · answered Jan 19 '20 at 18:04

1

Thanks for the HTML, it is what I suspected. In your JS your are referencing 2nd DDL by var arrivalSelect = $('#AllShipArrivals'); but there is no such element (it is, but this is just a label), instead you should use:

var arrivalSelect = $('#ArrivalId');

answered Jan 19 '20 at 18:04

Roman.Pavelko

1,555
2
15
18

This worked like a charm :) It populates the second ddl but it looks wmpty in stead of making the first item selected, any idea on that?? – Ingimar Andresson Jan 19 '20 at 18:18
you have this code `arrivalSelect.append($('', {value: null,text: ""}));` that inserts empty value at the beginning. Remove it if you don't want to. – Roman.Pavelko Jan 19 '20 at 18:20
Working lika a charm :) Thank you – Ingimar Andresson Jan 19 '20 at 18:21

score 0 · Answer 2 · answered Jan 19 '20 at 18:12

Make 'PartialView' or 'ViewComponent' for the second Dropdown, do ajax call on changing selection in the first dropdown, choose data depending on the value you passed during the ajax call, pass the data into your partial view and return it. Something like

public IActionResult SecondDropdownPartial(int selectedShip)
{
    var data = GetSomeData(selectedShip);
    return Partial("ViewName", data);
}

In js 'success' you get your view in response. Replace it on the page with

$('#container').html(response);

for example. More information : Rendering Partial Views using ajax

Archana David · Answer 3 · 2020-01-19T18:02:06.307

-1

edited try making the value to be empty string rather than null

emptyStr="";

arrivalSelect.append('<option value="${emptyStr}"> ${emptyStr} </option>'); arrivalSelect.append('<option value="${arrival.Value}"> ${arrival.Text} </option>');

edited Jan 19 '20 at 18:02

answered Jan 19 '20 at 17:53

Archana David

1,354
2
15
26

try this```arrivalSelect.append('');``` – Archana David Jan 19 '20 at 17:57
Sorry, no luck :/ Stilll getting data and everythink but the second DDL not changing. One question, I have not inserted my @Html.BeginForm in the view ...is this needed?? – Ingimar Andresson Jan 19 '20 at 18:07
no, could you show html element structure of 2nd dropdown once 1st dropdown is selected – Archana David Jan 19 '20 at 18:15
you can check this from developer controls in the browser – Archana David Jan 19 '20 at 18:17

Cascading population of a mvc dropdown

3 Answers3