补偿后退按钮，使选择元素无法填充

Question

我有一个包含两个select元素的表单，其中我在父选择上绑定一个onchange事件，该事件使用ajax来填充子选择的选项。我使用jQuery绑定事件，但为简单起见，在下面的示例中使用onchange属性。

<select id="parent_select" onchange="getOptions($(this).val(),'child_select');">
    <option>A</option>
    <option>B</option>
    ...
</select>
<select id="child_select"></select>

提交表单会将用户带到新页面。如果他们使用浏览器的后退按钮返回，则父选择仍将具有所选选项（至少在chrome中）。但是，不会填充子选择，这是预期的。

考虑此方案并填充子选项的最佳方法是什么？

到目前为止，我已经考虑了父母在$(document).on('ready',function(){...});中是否有选定的选项。有一种更好的方法吗？

Answer 1

您可以使用URL哈希来记录和恢复页面状态。

请参阅：Working with single page websites and maintaining state using a URL hash and jQuery

主要示例向您展示如何使用哈希。您需要记录选择的内容与#S1=3类似，然后在页面加载时查找该值，并相应地设置SELECT的索引。