我正在尝试使用两个下拉选择菜单制作表单：一个选择类别，另一个选择子类别。我正在尝试使子类别选项基于他们首先选择的类别。

这是我的子类别模型：

public class SubCategory
    {
        [Key]
        public int ID { get; set; }

        [Required]
        [StringLength(20)]
        public string Name { get; set; }


        [ForeignKey("Category")]
        public int CatID { get; set; }

        public virtual Category Category { get; set; }
        public virtual ICollection<Expense> Expenses { get; set; }
    }

我的控制器：

public IActionResult Create()
        {
            //dropdown-category 
            var categoryList = (from category in _context.Categories
                                select new SelectListItem()
                                {
                                    Text = category.Name,
                                    Value = category.ID.ToString()
                                }).ToList();
            categoryList.Insert(0, new SelectListItem()
            {
                Text = "----Select----",
                Value = String.Empty
            });
            ViewBag.CategoryList = categoryList;


            //dropdown-subcat
            var subCategoryList = (from subCategory in _context.SubCategories
                                   join category in _context.Categories
                                   on subCategory.CatID equals category.ID
                                   where subCategory.CatID == category.ID
                                   select  new SelectListItem()
                                   {
                                       Text = subCategory.Name,
                                       Value= subCategory.ID.ToString()
                                   }).ToList();
            ViewBag.SubCategoryList = subCategoryList;


            return View();
        }

和我的观点：

<div class="form-group">
                <label asp-for="CatID" class="control-label">Category</label>
                <select asp-for="CatID"
                        class="form-control"
                        id="cID"
                        asp-items="@(new SelectList(ViewBag.CategoryList,"Value","Text"))">

                </select>
                <span asp-validation-for="CatID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="SubCatID" class="control-label"> SubCategory </label>
                <select asp-for="SubCatID" 
                        class="form-control" 
                        id="scID"  
                        asp-items="@(new SelectList(ViewBag.SubCategoryList, "Value", "Text"))"></select>
                <span asp-validation-for="SubCatID" class="text-danger"></span>
            </div>

我知道我可能需要一些 javascript 来实现这个功能。但是，我不确定如何将类别 value 与我的 local database 进行比较。

<select asp-for="CatID"
                        class="form-control"
                        id="cID"
                        asp-items="@(new SelectList(ViewBag.CategoryList,"Value","Text"))" onchange="check(this)>

                </select>

function check(t) {
            $.ajax({
                type: "GET",
                url: 'xxx?CatID=' + $(t).val(),
                success: function (data) {
                    $.each(data, function (index, value) {
                        var text1 = '<option value=' + value.value + '>' +
                            value.text +'</option>';
                        $("#SubCatID").append(text1);
                    });
                },
                error: function (result) {
                    alert("error occured");
                }
            });
        }

public List<SelectListItem> xxx(int CatID){
    //compare CatId with subcategory table  here ,and return data of subcategorys
}