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

Question

我使用 JQuery 编写了一个级联下拉列表。我编写的代码有效；级联列表在更改时更新级联列表。但是当我离开页面然后按下浏览器上的后退按钮时，CASCADED 下拉列表会丢失其值。这是我的代码(类别列表在更改时填充产品列表):

<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 方法，但这有一个缺点，即在实际上我希望页面保持 EXISTING 状态时调用网站。

请帮忙!

Answer 1

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

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