Javascript 引导选择js插件不显示下拉列表中的选定项
我正在使用引导选择jQuery插件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
- 版本1.6.3
<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);