在初始选择更改时，jquery不会更新/渲染视图中的html

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

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