Question

我有一个包含两个下拉列表（DropDownListFor）的页面，这些页面在加载时填充。一个是类别，另一个是适合该类别的项目。下面有一个标题（TextAreaFor），它会更新以反映第二个下拉列表中的文本。

<div class="form-group">
    @Html.LabelFor(model => model.BLL_ID, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.DropDownListFor(model => model.BLL_ID, Model.BLL_Categories, new { @style = "max-width: 500px;" })
    </div>
</div>


<div class="form-group">
    @Html.LabelFor(model => model.BLL_2, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">    
        @Html.DropDownListFor(model => model.BLL_2, SessionManager.CurrentBLL.OriginalBLL, new { @style = "max-width: 500px;" })
        @Html.ValidationMessageFor(model => model.BLL_2, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.TextAreaFor(model => model.Note, htmlAttributes: new { @class = "form-control", @rows = "3", @readonly = "true" })
    </div>
</div>

第一个下拉列表在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) {
                $("<option value=" + this.Value + ">" + this.Text + "
                       </option>").appendTo(requests);
         });
    });
    updateTitle();
});

function updateTitle() {
    var title = $("#BLL_2>option:selected").text();
    $("#Note").val(title);
}

问题在于第一次下拉更改事件期间的标题更新。如果我使用JS调试器，我注意到当调用updateTitle（）函数时，第二个下拉列表尚未填充。有没有办法等到填充下拉列表来调用函数？

Answer 1

我发现通过在内部调用它们将按顺序触发。如果它们在外面，那么它将调用数据库并尝试在数据库调用完成之前调用更新并将导致问题。尝试像这样更改您的代码

categories.change(function () {
    requests.find('option').remove();
    $.getJSON('_Some_Page', { Category: 
         $("#BLL_ID>option:selected").val() }, function (data) {
             $(data).each(function (index) {
                $("<option value=" + this.Value + ">" + this.Text + "
                   </option>").appendTo(requests);
             });
         updateTitle(); //move the update here so it is inside the getJSON
    });
});

级联DropDownListFor ASP.NET MVC

1 个答案: