Cascade Dropdownlist by JQuery

Question

我正在用JQuery创建一个asp.net核心级联下拉列表。第一个下拉列表-Areas绑定到Viewbag.reas。第二个下拉列表Degrees基于第一个下拉选择的值进行填充。JsonResult GetDegree((方法返回一个数据列表。由于某些原因，当使用JQuery时，我的第二个下拉列表选项显示为未定义数据的列表。我需要将asp项目绑定到第二个下拉列表吗？如何做到？提前感谢！

controller:
[BindProperty]
public int AreaId { get; set; }
[BindProperty]
public int? DegreeId { get; set; }
public IActionResult Index()
{
ViewBag.Areas = GetAreas();
var qry = (from a in _context.Degrees
where a.AreaId == AreaId  && a.Active == true
select a).ToList();
return View(qry);
}
public JsonResult GetDegree()
{
List<SelectListItem> list = new List<SelectListItem>();

var degrees = (from a in _context.Degrees
where a.AreaId==AreaId
select new SelectListItem
{
Value = a.DegreeId.ToString(),
Text = a.DegreeName,
Selected = (a.DegreeId== 0)
});

if (degrees != null)
{
//assign 0 to the first option
list.Add(new SelectListItem { Text = "Select a Degree", Value = "0" });
foreach (var item in degrees)
{
list.Add(new SelectListItem { Text = item.Text, Value = item.Value });
}
return Json(new SelectList(list, "Value", "Text"));
}
else
{
return Json(new SelectList(list, "0", "Select a Degree"));
}
}
View:
<form asp-action="Index" asp-controller="Home">
<label for="AreaId">Areas</label>
<select id="AreaId" name="AreaId" asp-items="@(new SelectList(ViewBag.Areas,"Value","Text"))">
<option value="">--Select --</option>
</select>
<br />
<label for="DegreeId">Degrees</label>
<select id="DegreeId" name="DegreeId" value=""/>
<input type="submit" value="Search" /><br />
</form>
@section scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#AreaId").change(function () {
$("#DegreeId").empty();
$.ajax({
type: 'GET',
url: '@Url.Action("GetDegree")',
dataType: 'json',
data: { AreaId: $("#AreaId").val() },            
success: function (degrees) {
$.each(degrees, function (i, degree) {
$("#DegreeId").append('<option value="' + degree.Value  +'">'+
degree.Text + '</option>');
});
},
error: function (ex) {
console.log(ex);
}
});
});
});
</script>

Answer 1

从stackoverflow.com/questions/59600959/中找到解决方案…更改代码$("#DegreeId"(.append($("(.val(degree.value(.html(degree.text((；