0

I have a couple of drop down lists... The first of which has an onchange event that calls a Javascript funcction:

@for (int i = 0; i < Model.things.Count; i++)
{
    <tr>
        <td>
            @Html.DropDownListFor(m => m.Category[i].ID, ViewBag.Category as SelectList, "Please select a Category", new { @class = "class1", onchange = "Changed(this)" })
        </td>
        <td>
            @Html.DropDownListFor(m => m.SubCategory[i].ID, Enumerable.Empty<SelectListItem>(), "Please select a Sub Category", new { @class = "class2" })
        </td>
    </tr>
}

Within this function I am making an ajax call to a controller method that returns a SelectList:

    function TrackerChanged(val) {

        var id = val.value;

        $j.ajax({
            url: appRoot + 'Controller/Method',
            type: 'post',
            data: { 'id': id},
            success: function (results) {
                if (results) {
                        **** POPULATE SECOND DROPDOWN ABOVE ***
                    }
                else {
                    alert("Error updating comment");
                }
            },
            failure: function () {
                alert("Error updating comment");
            }
        });

    }

The Controller Method returns a SelectList:

    public SelectList Method(id categoryID)
    {
        IEnumerable<SelectListItem> select = null;

        // Populate the IEnumerable with SubCategory results to show in the second Drop Down

        return new SelectList(select, "Value", "Text");
    }

but as you may notice from the comment in my ajax success chunk - I do not know how I would bind my new results back to the controller.

Please can someone help. I have looked for some examples and nothing seems to be working for me.

CJH
  • 1,266
  • 2
  • 27
  • 61
  • Suggest you study the code in [this DotNetFiddle](https://dotnetfiddle.net/1bPZym) for how to implement cascading dropdownlists. But you have other issues as well - you will need to use relative selectors to match the respective dropdownlists –  Jan 18 '18 at 21:32
  • Thanks for the feedback Stephen. I will take a look through that example - but can I ask you to explain what you mean exactly by 'relative selectors'? Do you mean the dropdowns are somehow bound by a view model or something? – CJH Jan 18 '18 at 23:36
  • You 2 dropdownlists are inside a loop so your need to ensure you select the associated one. Start by getting rid of the awful `onchange=".."` and use [Unobtrusive JavaScript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript). Then its `$('.class1'),change(function() { var otherSelect = $(this).closest('tr').find('.class2'); ... })` –  Jan 18 '18 at 23:45
  • Also you should read [MVC5 Razor html.dropdownlistfor set selected when value is in array](https://stackoverflow.com/questions/37407811/mvc5-razor-html-dropdownlistfor-set-selected-when-value-is-in-array/37411482#37411482) - if you editing existing data or need to return the view, each (first) dropdownlist will display the first option, not the value that has been previously saved (and of course nothing will be displayed in the 2nd dropdownlist because you use `Enumerable.Empty()` but the DotNetFiddle shows the correct code to make binding work correctly –  Jan 18 '18 at 23:50

0 Answers0