博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器前进后退对下拉框数据的丢失(省市联动实现和例子)
阅读量:6875 次
发布时间:2019-06-26

本文共 2272 字,大约阅读时间需要 7 分钟。

浏览器前进后退对下拉框数据的丢失的问题,典型的为省市下拉框联动时城市数据的丢失。省市联动一般的实现为城市在省份的选择后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) {                        $("").val(item.AddressId).text(item.AddressName).appendTo($ddlCity);                    });                }, "json");            }            else {                $ddlCity.find("option").remove();                $("").val("").text("--请选择--").appendTo($ddlCity);            }        }

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

  1. 一般都会自动使用缓存的数据,除非禁用缓存才会重新从服务端获取数据。
  2. 大部分浏览器在默认设置下都会保存每个元素的value,也就是用户输入的数据。
  3. 具体的知识可以查看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) {                        $("").val(item.AddressId).text(item.AddressName).appendTo($ddlCity);                    });                    if ($("#cityIdHidden").val()) {                        $("#CityId").val($("#cityIdHidden").val());                    }                }, "json");            }            else {                $ddlCity.find("option").remove();                $("").val("").text("--请选择--").appendTo($ddlCity);            }        }

都搞定。

 

 

转载于:https://www.cnblogs.com/jinzhao/p/3184462.html

你可能感兴趣的文章
Linux环境测试机器端口连通性
查看>>
关于Linux连接工具mobaxterm显示中文乱码问题
查看>>
iphone-common-codes-ccteam源代码 CCUILabel.h
查看>>
码农们:你属于哪一种极品程序员?
查看>>
【Daily】Javascript事件对象
查看>>
时间记录日志
查看>>
菜谱查询接口文档
查看>>
Mybatis——SQL语句构建器类
查看>>
LeetCode——Search a 2D Matrix II
查看>>
链表中环的入口结点
查看>>
什么是区块链?
查看>>
了解MIP(Mobile Instant Pages)
查看>>
SVN版本冲突解决详解 - snwrking的专栏 - 博客频道 - CSDN.NET
查看>>
Oralce安装、使用过程中出现的问题
查看>>
ny14 会场安排问题
查看>>
使用Java生成具有安全哈希的QR码
查看>>
测试1.书店的增删改查项目.链接数据库
查看>>
前端开发利器 Emmet 介绍与基础语法教程
查看>>
js动态插入css或者js文件
查看>>
paper 155:face/head pose estimation
查看>>