Javascript 引导选择js插件不显示下拉列表中的选定项

Javascript 引导选择js插件不显示下拉列表中的选定项,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我正在使用引导选择jQuery插件 版本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="10

我正在使用引导选择jQuery插件

  • 版本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>
但是,该页面现在显示的船舶为“全部选定”,如下所示:

尽管控制台输出显示我已在下拉列表中选择了ship(所有ships的值均为零),但仍会出现这种情况:


bootstrap select的文档中说,如果您更新了我所做的select的值,就调用“Render”。那么,有人能告诉我为什么下拉列表没有显示正确的(即所选的值)值吗?

为什么要回到这里??当您向后导航时,它将显示缓存的上一页,并且不会更新您的
下拉列表。相反,我建议尝试
location.href
我不想更新下拉列表。。。。这是一个移动应用程序,所以从缓存中获取东西正是我想要的,因为这不是到服务器的另一次往返。我希望下拉列表能够准确反映用户之前选择的内容,以便他们可以进行另一次搜索。
javascript:history.go(-1);