Javascript 在初始选择更改时，jquery不会在视图中更新/呈现html

我的观点似乎在经过选择的改变后落后了一步。我有一个选择/下拉列表，其中填充了一个getJSON请求。在初始选择之后，我在fiddler中验证了请求是否成功，但我的视图没有更新。疯狂的是，当我做出另一个选择时，视图随后会用以前的数据更新，并以这种方式继续。我错过了什么

这是我的HTML：

<div id="ClientSection">
<p>
    @Html.Label("clientId", "Client")
    @Html.DropDownListFor(x => x.PrimaryClient, Enumerable.Empty<SelectListItem>(), 
                          "Choose Client", new {id = "clientId"})
</p>

<table id="clientLocationsTable">
    <thead>
        <tr>
            <th>Region</th>
            <th>Location</th>
            <th>Address</th>
            <th>Suite</th>
            <th>City</th>
            <th>State</th>
            <th>Zip Code</th>
            <th>Phone #</th>
            <th>Email</th>
            <th>Contact</th>
          </tr>
        </thead>
          <tbody>

          </tbody>
    </table>
</div>

还有我的JavaScript：

@section scripts
{
<script>
    $(document).ready(function () {

        // populate main client dropdown
        $(function() {
            $.getJSON("/api/client/getclients/", function(data) {
                $.each(data, function (index, clientObj) {
                    $("#clientId").append(
                        $("<option/>").attr("value", clientObj.Id)
                            .text(clientObj.CompanyName)
                    );
                });
            });
        });

        // create new array
        var otherClientLocations = new Array();

        $("#clientId").change(function () {

            // clear table body
            $("#clientLocationsTable > tbody").empty();

            // create new array
            var clientList = new Array();

            // set the id
            var primaryId = $("#clientId").val();

            $.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {

                    // populate otherClientLocations Array
                    $.each(data, function(key, val) {
                        clientList.push(val);
                    });
                    otherClientLocations = clientList;
                });


            // create rows if needed
                    if(otherClientLocations.length > 0) {

                        $.each(otherClientLocations, function(key, val) {
                            $("#clientLocationsTable tbody")
                                .append("<tr><td>" + val.CompanyRegion +
                                    "</td><td>" + val.CompanyLocationCode + "</td>"
                            + "<td>" + val.CompanyAddress + "</td>" + "<td>" +
                            val.CompanySuite + "</td><td>" + val.CompanyCity +
                            "</td><td>" + val.CompanyState + "</td><td>" +
                             val.CompanyZipCode + "</td><td>" + val.CompanyPhoneNumber 
                            + "</td><td>" + val.CompanyEmail + "</td><td>" +
                             val.CompanyContactFn + " " + val.CompanyContactLn +
                             "</td>" + "</tr>");
                        });
                    }

        });
    });
</script>
}

---

您没有考虑到json是异步获取的。在从服务器返回json之前更新dom

尝试：

我已经移动了一些括号，现在是：

$.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {
  // update array AFTER request is complete
  // then update dom based on new version of array
});

---

我不容易看出有什么不同。编辑：我现在明白了，您将dom操作嵌套在成功处理程序中。。。

$.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {
  // update array AFTER request is complete
});
// update dom based on value of array while request is still in progress

$.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {
  // update array AFTER request is complete
  // then update dom based on new version of array
});