ASP.NET MVC的层叠DropDownList

Johnny 发表于 Dev

强尼

我有一个带有两个下拉列表（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中注册的change事件，该事件填充第二个下拉列表。第二个下拉菜单中有一个change事件，用于更新标题。

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（）函数时，第二个下拉列表尚未填充。有什么方法可以等待直到下拉列表被调用来调用该函数？

马特·波迪利（Matt Bodily）

我发现，通过将呼叫放入内部，它们将被顺序触发。如果他们不在外面，它将在数据库调用完成之前调用数据库并尝试调用更新，这将导致问题。尝试像这样更改代码

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
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。