MVC ASP.NET Dropdown onchange загрузить еще один выпадающий

Question

У меня есть 2 раскрывающихся списка на странице. Когда я выбираю какое-либо значение из первого раскрывающегося списка, то во втором раскрывающемся списке все значения должны загружаться в соответствии с выбранным значением (подкатегории загружаются в соответствии с категориями).Вот что я пробовал, но это не работает:

Модель

 public class Product
    { ...
      public int CategoryId { get; set; }
      public virtual Category Category { get; set; }
      public IEnumerable<SelectListItem> Categories { get; set; }

      public int SubCategoryId { get; set; }
      public virtual SubCategory SubCategory { get; set; }
      public IEnumerable<SelectListItem> SubCategories { get; set; }
      ...
    }

Просмотр

  <label>Select Category</label>
  @Html.DropDownListFor(m => m.CategoryId, new SelectList(Model.Categories, "Value", "Text"), "Select Category", new { id = "catList", @class = "form-control" })

  <label>Selectat Subcategory</label>
  @Html.DropDownListFor(m => m.SubCategoryId, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Selectat Subcategory", new { id = "subcatList", @class = "form-control" })

<script type="text/javascript">
    $(document).ready(function () {
        $("#catList").change(function () {
            var cID = $(this).val();
            $.getJSON("../Product/New/LoadSubCategories", { catId: cID },
                function (data) {
                    var select = $("#subcatList");
                    select.empty();
                    select.append($('<option/>', {
                        value: 0,
                        text: "Selecteaza o subcategorie"
                    }));
                    $.each(data, function (index, itemData) {
                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));
                    });
                });
        });
    });
</script>

Контроллер

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadSubCategories(string catId)
{
    var subCatList = GetAllSubCategories(Convert.ToInt32(catId));
    return Json(subCatList, JsonRequestBehavior.AllowGet);
}

[NonAction]
public IEnumerable<SelectListItem> GetAllSubCategories(int selectedCatId)
{
      //generate empty list
      var selectList = new List<SelectListItem>();

      var subcategories = from sbcat in db.SubCategories
                          where sbcat.CategoryId == selectedCatId
                          select sbcat;
      foreach (var subcategory in subcategories)
      {
           //add elements in dropdown
           selectList.Add(new SelectListItem
           {
                Value = subcategory.SubCategoryId.ToString(),
                Text = subcategory.SubCategoryName.ToString()
            });
       }
      return selectList;
}

Answer 1

Для изменения второго выпадающего значения в соответствии с первым выпадающим значением, вам нужно написать событие Onchange, тогда только оно получит изменение. Пожалуйста, проверьте ниже на stackoverflow вопрос, ответ на который будет вам полон помощи

Нажмите здесь

Answer 2

вам нужно изменить getJson на Ajax метод

вот пример кода ajax

$.ajax({
                type: "GET",
                url: '/Product/New/LoadSubCategories',
                data: {catId: cID},
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data) {     
                var select = $("#subcatList");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "Selecteaza o subcategorie"
                }));
                $.each(data, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            }

            function errorFunc() {
                alert('error');
            }
        });

этот код ajax, который вам нужно написать при изменении выпадающего меню и в случае успехавызова ajax, вам нужно написать код, который вы хотите сделать, когда значение выпадающего списка изменяется и данные получены успешно