補償後退按鈕離開選擇元素無人填充

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的索引。