How to populate new dropdownlist in partial view?

See more:

ASP.NET

Ajax

MVC

jQuery

Hi
I am trying to make an cascading dropdown function with partial view. The first dropdown I have two categories, and when I click on the category it finds the children for that category and fill the second dropdown list ( on my partial view ).

When I click on the second dropdown menu I will find the children for that category I click on, and then a new dropdown will populate with this new information.

Can someone help me in the right direction?

This is my controller :

[HttpGet]
        public PartialViewResult CategoryList(int catId)
        {

            var subcategories = (from s in db.Categories
                                 where s.ParentCategoryId == catId
                                 select s).ToList();
            ViewBag.CategorySub = new SelectList(subcategories, "CategoryId", "Name");
            
            return PartialView("DropDownList", subcategories);

        }
        [HttpGet]
        public PartialViewResult SubCategoryList(int idSub)
        {

            var subcategories = (from s in db.Categories
                                 where s.ParentCategoryId == idSub
                                 select s).ToList();
            ViewBag.CategorySub = new SelectList(subcategories, "CategoryId", "Name");

            return PartialView("DropDownList", subcategories);

        }

The script on the view :

//Run Jquery script
   jQuery(document).ready(function ($) {
       //Dropdownlist Selectedchange event

       $("#CategoryId").change(function () {
           //Take the Id from the dropdown list when selected an item
           var id = $(this).val();
           //Make the dropdown empty

           //Send the information to the controller

           $.ajax({
               type: 'GET',
               url: '@Url.Action("CategoryList", "Manage")', // we are calling json method

               data: { catId: id },
               dataType: 'html',
               contentType: 'application/html; charset-utf-8',
               //here we are get value of selected item and passing same value
               // to input to the json method CategoryList.
               success: function (data) {
                   $('#dynamicContent').show();
                   $("#dynamicContent").html(data);
               }
           });
       });
       $('body').on("change", "#CategorySub", function (evt) {
           var idSub = $(this).val();

           alert(idSub);
           $.ajax({
               type: 'GET',
               url: '@Url.Action("CategoryList", "Manage")', // we are calling json method
               context: document.body,
               data: { idSub: ids },
               dataType: 'html',
               contentType: 'application/html; charset-utf-8',
               //here we are get value of selected item and passing same value
               // to input to the json method CategoryList.
               success: function () {
                   alert('done');
               }
           });


       });
});