级联DropDownListFor ASP.NET MVC
我有一个页面有两个下拉（DropDownListFor），在加载时填充。 一个是类别，另一个是适合该类别的项目。 下面有一个标题（TextAreaFor），它会更新以反映第二个下拉列表中的文本。
@Html.LabelFor(model => model.BLL_ID, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.DropDownListFor(model => model.BLL_ID, Model.BLL_Categories, new { @style = "max-width: 500px;" }) @Html.LabelFor(model => model.BLL_2, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.DropDownListFor(model => model.BLL_2, SessionManager.CurrentBLL.OriginalBLL, new { @style = "max-width: 500px;" }) @Html.ValidationMessageFor(model => model.BLL_2, "", new { @class = "text-danger" }) @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" }) @Html.TextAreaFor(model => model.Note, htmlAttributes: new { @class = "form-control", @rows = "3", @readonly = "true" }) 第一个下拉列表在JS中注册了一个更改事件，填充第二个下拉列表。 第二个下拉列表有一个更新事件，用于更新标题。
var categories = $("#BLL_ID"); var requests = $("#BLL_2"); $("#BLL_2").change(function () { updateTitle(); }); categories.change(function () { requests.find('option').remove(); $.getJSON('_Some_Page', { Category: $("#BLL_ID>option:selected").val() }, function (data) { $(data).each(function (index) { $("" + this.Text + " ").appendTo(requests); }); }); updateTitle(); }); function updateTitle() { var title = $("#BLL_2>option:selected").text(); $("#Note").val(title); }
问题是关于第一次下拉更改事件期间的标题更新。 如果我使用JS调试器，我注意到调用updateTitle（）函数时仍未填充第二个下拉列表。 有没有办法等到填充下拉来调用该函数？
我发现通过在内部调用它们将按顺序触发。 如果它们在外面，那么它将调用数据库并尝试在数据库调用完成之前调用更新并将导致问题。 尝试更改这样的代码
categories.change(function () { requests.find('option').remove(); $.getJSON('_Some_Page', { Category: $("#BLL_ID>option:selected").val() }, function (data) { $(data).each(function (index) { $("").appendTo(requests); }); updateTitle(); //move the update here so it is inside the getJSON }); });