Javascript 浏览器缓存中断HTML选择列表Ajax筛选：由onchange事件触发

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

应用程序。逻辑：用户选择项目并点击提交->进入搜索结果页面

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

默认情况下，我的搜索页面的外观

按成分搜索食品

配料

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

成分类型

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

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

简单过滤器的工作原理示例以及点击浏览器后退按钮时出现的问题场景

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

配料

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

成分类型

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

然后，用户查看正确的搜索结果，但点击浏览器返回按钮返回时，这就是显示的视图。选择正确且完整，但过滤会出现问题

配料

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

成分类型

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

我在ajax实现中使用xmlHTTP=newXMLHttpRequest（）

问题: 如果您能回答以下问题，我将不胜感激：

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

---

在没有看到代码的情况下，我怀疑您的筛选代码仅在select事件触发时运行。单击“后退”按钮将重新加载包含上一个表单元素值/选择的页面，但选择事件不会触发

您的代码需要在页面加载后和触发select事件时运行过滤逻辑