JQuery:按下后退按钮时，级联下拉列表丢失值

Question

我已经使用JQuery编写了一个级联下拉列表。我编写的代码可以正常工作；级联列表在更改时会更新级联列表。但是，当我离开页面并按下浏览器上的后退按钮时，级联下拉列表失去了它的值。以下是我的代码(类别列表在更改时会填充产品列表)：

<select id="CategoryList" onchange="CategoryList_OnChange()">
    <option value="" selected="selected"></option>
    <option value="1" selected="selected">Food</option>
    <option value="2" selected="selected">Toys</option>
    <option value="3" selected="selected">Books</option>
</select>

<select id="ProductList"></select>

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function CategoryList_OnChange() {
        var selected = $('#CategoryList').val();
        if (selected != null && selected != '') {
            $.getJSON('SelectList/ProductList/' + selected, function(selectList) {
                $('#ProductList option').remove();
                $.each(selectList, function(index, value) {
                    $('#ProductList').append("<option value='" + value.Value + "'>" + value.Text + "</option>");
                });
            });
        }        
    }
</script>

有没有办法在导航离开页面时也能保持填充ProductList？我对浏览器工作原理的理解是，它们的目的是保持页面的状态，即使在导航离开时也是如此。

我知道我只需要把代码放入

$(document).ready(function() { ... });

它将显式地调用onchange方法，但这有一个缺点，那就是调用网站，而实际上我希望页面保持现有状态。

请帮帮我！

Answer 1

浏览器为什么要保留由js操作产生的状态。大多数浏览器都不会。

您可以尝试使用cookies library并保存所选的类别(如果有)。当用户稍后返回页面并且在此期间没有清除cookie时，您可以从cookie中读出该值，并自动发出$.getJSON请求以“重新填充”产品列表