点击javascript:history.go(-1)按钮后填充实时<select>元素

Question

我已经为一个问题挣扎了一段时间了。

我有一个具有以下默认状态的元素：

<select name="model"></select>

有一个实况事件钩子，用选项填充上面的元素：

<select name="model">
    <option value=""></option>
    <option value="Gemini">Gemini</option>
    <option value="Piazza">Piazza</option>
    <option value="Pickup">Pickup</option>
</select>

之后，有一个SerializeObject函数，它将表单的键-val对转换为json，并将其发送给PHP控制器。

然后，使用ajax在页面上显示结果。当用户点击一个结果时，他会被发送到详细页面，该页面顶部有一个“后退”按钮。这是后退按钮：

<a href="javascript:history.go(-1);">Back</a>

当用户单击它时，他会转到以前的结果页面。除了"model“元素之外，每个select元素都正确地填充了预期的数据。我认为原因在于它的内容是通过ajax请求和.html()覆盖生成的。

我做了一个跨浏览器的测试:在Chrome 36上不工作，在IE 9上不工作，在Firefox 30上工作得很好。

忘了提一下:我已经激活了header("Cache-control: private");。

我希望有人能提出一个解决方案。提前感谢！

Answer 1

听起来你当前的实现会因浏览器/版本的不同而有所不同。我会使用像history.js这样的东西来让这一切变得更容易。

填充select元素时，将使用的数据保存到当前历史状态对象中。然后，当浏览器状态改变时，从新索引处当前处于“历史状态”的数据中重新加载选项。