how to reload/refresh a cascade dropdown within a partial view without loading the view

Question

I have searched for this on internet but couldn't find any suitable answer. i have a partial view in which there are three different dropdown lists. I am making use of two diff kind of functionalities therein..

1. On changing 1st dropdown the other two get updated
2. On changing 2nd dropdown the third one updates

Things work fine until after changing the second dropdown, if i want to change the first dropdown again the third dropdown doesn't loads and returns no value.

 $("#FoodItemID").change(function () {  //
            var id = $("select#FoodItemID").val();
            $.ajax({
                url: '/FoodRecipe/GetServingType',
                type: "POST",
                data: { FoodItemID: $("select#FoodItemID").val() },
                success: function (result) {
     
                    $("#ServingTypeID").val(result[0]);
                    $("#ServingSubTypeID").val(result[1]);

                }
            });

        });

        $("#ServingTypeID").change(function () {
            $.ajax({
                url: '/FoodRecipe/GetServing',
                type: "POST",
                data: { ServingTypeID: $("select#ServingTypeID").val() },
                success: function (result) {

                    var len = result.length;

                    $("#ServingSubTypeID").empty();
                    for (var i = 0; i < len; i++) {
                        var id = result[i]['id'];
                        var name = result[i]['name'];

                        $("#ServingSubTypeID").append("<option value='" + id + "'>" + name + "</option>");
                        $('#ServingSubTypeID').trigger('select:updated'); //this is not working for me
                    }
                }

            });
        });

This is my code for the dropdowns. I can not upload the whole partial view as it results in losing all the values after loading them, i understand the problem i am getting is related to the values not getting updated inside my dropdowns once i change the second dropdown (since the values coming from controller change)

SO what i think is a good option is to somehow reload the values in third dropdown. But how to do that i don't know..!!

I know this might be the easiest thing to do but i can't figure this out.

Answer 1

After spending 17 hours on this i have got to know how to do it. Here is what i have done for any future readers who'll be confused like i was.

I went back to my controller and loaded all items plus the specific items related to the specific id i wanted to pass and fetch items on/for. data binded the all item loaders and yeah it worked. and all of the above scripts remained same.

Here is the change i made in my controller.

Previous Controller Code

 [HttpPost]               //Getting Sub Type and Serving Type on Food Item ID
    public async Task<IActionResult> GetServingType(int? FoodItemID)
    {
        vmControllerMessage.APIExecutionBaseURL = APIUrls.APIApplicationPath;
        vmControllerMessage.APIExecutionURL = "APIFoodRecipe/GetServingTypes";
        vmControllerMessage.VMControllerObject = FoodItemID;
        HttpResponseMessage httpResponseMessage = PutJsonModelAPIWithNoRedirect();
        if (httpResponseMessage.StatusCode == System.Net.HttpStatusCode.OK)
        {
            int[] i = JsonConvert.DeserializeObject<int[]>(vmServiceMessage.VMObject.ToString());
            return Json(i);
        }
        else
        {
            return Json(vmServiceMessage);
        }

    }

New Code

 [HttpPost]               //Getting Sub Type and Serving Type on Food Item ID
    public async Task<IActionResult> GetServingType(int FoodItemID)
    {
        VMFoodRecipeDetail model = new VMFoodRecipeDetail();
        model.FoodItemID = FoodItemID;
        vmControllerMessage.APIExecutionBaseURL = APIUrls.APIApplicationPath;
        vmControllerMessage.APIExecutionURL = "APIFoodRecipe/GetServingTypes";
        vmControllerMessage.VMControllerObject = model;
        HttpResponseMessage httpResponseMessage = PutJsonModelAPIWithNoRedirect();
        if (httpResponseMessage.StatusCode == System.Net.HttpStatusCode.OK)
        {
            VMFoodRecipeDetail obj = JsonConvert.DeserializeObject<VMFoodRecipeDetail>(vmServiceMessage.VMObject.ToString());
            ViewBag.ServingTypeID = new SelectList(obj.ServingTypes, "ID", "Name",obj.ServingTypeID);
            ViewBag.ServingSubTypeID = new SelectList(obj.ServingSubTypes, "ID", "Name", obj.ServingSubTypeID);
            int[] ids = { obj.ServingTypeID, obj.ServingSubTypeID };
            return Json(ids);
        }
        else
        {
            return Json(vmServiceMessage);
        }

    }