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

浏览器前进后退对下拉框数据的丢失的问题，典型的为省市下拉框联动时城市数据的丢失。省市联动一般的实现为城市在省份的选择后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);

}

都搞定。

本文转自today4king博客园博客，原文链接：http://www.cnblogs.com/jinzhao/p/3184462.html，如需转载请自行联系原作者

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

Ext JS - Combobox 加载下拉框数据级联下拉框
Combobox 加载下拉框数据点击下拉框,数据从后台加载,是很常见的需求.如下图: View 中下拉框 dockedItems : [ {dock : 'top',xtype : 'toolbar ...
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
绑定多个下拉框数据（关系式）
绑定多个下拉框数据(关系式) ----------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间 ...
Excel导出表格时，下拉框数据长度超过255出现的问题及解决办法
文章目录 1.直接添加下拉框,数据量过多会有问题 2.使用隐藏sheet的方式实现 3.多选下拉框 4.参考: 1.直接添加下拉框,数据量过多会有问题 /*** 创建下拉列表选项(单元格下拉框数据小于 ...
利用ajax实现二级联动下拉框6,Ajax实现二级联动菜单
本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时 ...
Select下拉框实现中国省市区三级联动
JS Select下拉框实现中国省市区三级联动联动效果以内蒙古自治区为例 distpicker.js资源获取 https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1 ...
单个下拉框数据保持问题
1.在工作中遇到了数据保持问题,查询时当查询返回结果页面时,页面上的下拉框选中的值仍然为当时的查询条件,例如下拉框中存放河北省所有的城市放在city数组中, 第一中方法为下面所示: <selec ...
easyui 添加下拉框数据_电商教父：关于淘宝关键词点击率以及提升数据的方法...
对于卖家来说,做好店铺的运营推广,了解店铺的发展行情是非常有必要的.其中,关键词的点击率就是一个不可忽略的数据,我们在哪里可以查看关键词点击率呢? 打开计划-关键词上有点击量显示,可以由高到低显示,可 ...
easyui 添加下拉框数据_功能更新：熟用仪表盘这个功能，你可以少建90%的数据报表...
你也在为一大堆工作报表头疼吗? 你也在为抓不到重点烦躁吗? 你也在烦恼报表的无关信息太多吗? 不用担心,筛选组件帮你一次性解决所有难题! 仪表盘新增筛选组件,可将多个报表汇总在一个查询入口进行查询.一 ...

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

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

最新文章

热门文章