Bootstrap-Select js插件不显示下拉列表中的选定项目

Question

我正在使用bootstrap-select jQuery插件

• http://silviomoreto.github.io/bootstrap-select/
• 版本1.6.3

我的页面包含JS（参见下图），用于填充和显示从一系列下拉列表中选择的项目：

<form role="form">
    <div class="form-group" id="SearchOptions" style="display: none;">
        <select id="ddlLocations" class="selectpicker show-tick" data-width="100%" data-size="50">
            <option value="0">All Ports</option>
            <option class="divider" disabled="disabled"></option>
            @{
                foreach (DepartFromItemBriefDto departFrom in Model.DepartFroms.Items)
                {
                    <option value="@departFrom.PortName">@departFrom.PortName</option>
                }
            }
        </select>
        <select id="ddlDates" class="selectpicker show-tick" data-width="100%" data-size="50">
            <option value="0">All Dates</option>
            <option class="divider" disabled="disabled"></option>
            @{
                foreach (DepartMonthItemBriefDto departMonth in Model.DepartMonths.Items)
                {
                    <option value="@departMonth.Id">@departMonth.Description</option>
                }
            }
        </select>
        <select id="ddlBrands" class="selectpicker show-tick" data-width="100%" data-size="50">
            <option value="0">All Brands</option>
            <option class="divider" disabled="disabled"></option>
            @{
                foreach (CruiseBrandItemBriefDto cruiseBrand in Model.CruiseBrands.Items)
                {
                    <option value="@cruiseBrand.Id">@cruiseBrand.Description</option>
                }
            }
        </select>
        <select id="ddlShips" class="selectpicker show-tick" data-width="100%" data-size="10">
            <option value="0">All Ships</option>
            <option class="divider" disabled="disabled"></option>
            @{
                foreach (ShipItemBriefDto ship in Model.Ships.Items)
                {
                    <option value="@ship.Id">@ship.Description</option>
                }
            }
        </select>
    </div>
</form>

<a class="btn btn-search btn-block" href="/CruiseSearch/Search" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="phone"> Search</span></a>
<br />

<script type="text/javascript">
    $(document).ready(function() {

        //Hook up all the change events
        $("#ddlBrands").change(function() {
            $.get("/CruiseSearch/CruiseBrandSelected", { aBrandId: $(this).val() });

            //Get the list of ships within the brand
            var $jqGetShipList = $.get("/CruiseSearch/GetShipsListByBrand", { aBrandId: $(this).val() });
            $jqGetShipList.done(function(aData) {
                var $shipsDropDown = $('#ddlShips');
                $shipsDropDown.empty();

                $.each(aData, function(aNdx, aItem) {
                    $shipsDropDown.append($("<option></option>")
                        .attr("value", aItem.Id)
                        .text(aItem.Value));
                });

                //Ensure the styling on the drop down refreshes itself
                $shipsDropDown.selectpicker('refresh');
            });
        });

        $("#ddlDates").change(function() {
            $.get("/CruiseSearch/DepartMonthSelected", { aDateId: $(this).val() });
        });

        $("#ddlLocations").change(function() {
            $.get("/CruiseSearch/DepartFromSelected", { aPortName: $(this).val() });
        });

        $("#ddlShips").change(function() {
            $.get("/CruiseSearch/ShipSelected", { aShipId: $(this).val() });
        });

        //As we can come in here via a navigation backwards in the browser history ensure they are all called once
        //so that the front end and the back end match up
        $("#ddlBrands").change();
        $("#ddlDates").change();
        $("#ddlLocations").change();
        $("#ddlShips").change();

        //Only after we have finished populating and updating the selects do we show them
        //Prevents flicker on certain mobile devices and their native browsers
        $('#SearchOptions').toggle();
    });
</script>

我显示页面并从Brand中选择（最终填充船只下拉）然后我选择一艘船，以便我最终得到：

我按一个按钮执行搜索，然后我有一个链接，可以在浏览器历史记录中导航回来：

javascript:history.go(-1);

然而，该页面现在显示为＆＃34;全部选定＆＃34;按照：

尽管控制台输出显示我在下拉列表中选择了发货（所有船只的值都为零）：

bootstrap-select的文档说要调用＆＃39;渲染＆＃39;如果你更新我所做的选择的值。那么，任何人都能指出正确的方向，为什么下拉列表没有显示正确的（即选定值）值？