浏览器前进后退对下拉框数据的丢失（省市联动实现和例子）

浏览器前进后退对下拉框数据的丢失的问题，典型的为省市下拉框联动时城市数据的丢失。省市联动一般的实现为城市在省份的选择后js加载。

那么每次城市的改变只需要重新加载新的城市数据并更新下拉框即可：

下拉函数

function ReloadCities() {
var $ddlCity = $("#CityId");
var selec = $("#ProvinceId").val();
if (selec) {
$ddlCity.find("option").remove();
var url = "@(Url.Action("CityListByProvinceId", "Common", new { area = "Default" }))";
$.post(url, { 'id': selec }, function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item.AddressId).text(item.AddressName).appendTo($ddlCity);
});
}, "json");
}
else {
$ddlCity.find("option").remove();
$("<option></option>").val("").text("--请选择--").appendTo($ddlCity);
}
}

正常使用没有问题，但是当用户跳转到其它页面再回退时选中丢失。关于回退普及下面几个关键的知识点：

一般都会自动使用缓存的数据，除非禁用缓存才会重新从服务端获取数据。

大部分浏览器在默认设置下都会保存每个元素的value，也就是用户输入的数据。

具体的知识可以查看widnow对象的history。

知道了以上几点后，首先，为什么城市列表会丢失，因为它是js操作dom的结果，所以增加触发代码：

触发代码

$(document).ready(function () {
if (!$("#CityId").val()) {
ReloadCities();
}});

城市是加载出来了，但是选中的状态丢了。怎么办呢，抱着绕开这个复杂的城市元素的思路，直接放个隐藏的input来保存前后的value，那么解决方案就出来了。

同步隐藏input的代码

$("#CityId").change(function () {
$("#cityIdHidden").val($("#CityId").val());
});

在重新加载城市列表时从隐藏input中获取value值，新代码为红色段

function ReloadCities() {
var $ddlCity = $("#CityId");
var selec = $("#ProvinceId").val();
if (selec) {
$ddlCity.find("option").remove();
var url = "@(Url.Action("CityListByProvinceId", "Common", new { area = "Default" }))";
$.post(url, { 'id': selec }, function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item.AddressId).text(item.AddressName).appendTo($ddlCity);
});
if ($("#cityIdHidden").val()) {
$("#CityId").val($("#cityIdHidden").val());
}
}, "json");
}
else {
$ddlCity.find("option").remove();
$("<option></option>").val("").text("--请选择--").appendTo($ddlCity);
}
}

都搞定。