浏览器缓存破坏HTML选择列表Ajax过滤：由onchange事件触发

Question

我有HTML选择列表框，允许用户搜索项目。我还有一个简单的Ajax实现，当用户选择项目时强制执行过滤 - 在单击选项时由 select 元素的onchange事件触发触发。

应用。逻辑：用户选择项目并点击提交 - ＆gt;转到搜索结果页面。

我的问题是，当用户[从浏览器后退按钮]导航回搜索结果页面到选择列表框时，选择会保留，但过滤会以某种方式丢失。我认为这可能是由于浏览器缓存崩溃了？

例如。默认情况下看看我的Searh页面。

按成分搜索食品食品

1. INGREDIENT

   • 所有成分*
   • 面包
   • 干酪

2. 成分类型

   • 所有成分类型*
   • 切达干酪
   • 白色小包
   • 白奶酪
   • 全麦面包

默认情况下，当搜索页面加载搜索页面时，会默认选择“所有成分”和“所有成分类型”选项。

简单过滤器如何工作的示例以及点击浏览器后退按钮时的问题场景。

场景：用户然后选择面包，而Ajax调用将第二个列表过滤为仅面包项。然后，用户选择白色发髻并点击搜索按钮

1. INGREDIENT

   • 所有成分*
   • 的面包
   • 干酪

2. 成分类型

   • 所有成分类型*
   • 白发髻
   • 全麦面包

用户然后查看正确的搜索结果，但在通过点击浏览器后退按钮导航回来时，这是显示的视图。选择是正确和完整的，但过滤分崩离析。

1. INGREDIENT

   • 所有成分*
   • 的面包
   • 干酪

2. 成分类型

   • 所有成分类型*
   • 切达干酪
   • 白发髻
   • 白奶酪
   • 全麦面包

我正在使用xmlHTTP = new XMLHttpRequest（）构成我的ajax实现。

问题： 我很感激答案：

• 导致这种情况发生的原因是什么？
• 我如何解决此问题？

Answer 1

在没有看到代码的情况下，我怀疑您的过滤代码仅在select事件触发时运行。单击“返回”按钮会重新加载包含先前表单元素值/选择的页面，但不会触发select事件。

您的代码需要在页面加载和激活select事件后运行过滤逻辑。