Question

我正在处理一个可以过滤类别，子类别的搜索表单。这是我的HTML代码：

<select id="category" name="category">
    <option value="0">-- All Categories --</option>
    <option value="one">category one</option>
    <option value="two">category two</option>
</select>
<select id="subcategory" name="subcategory">
    <option value="0">-- All Sub Categories --</option>
</select>

我使用JQuery过滤子类别

$('#category').on("change",function(){
    var cat = $(this).find("option:selected").text();
    var subCat = "";
    switch (cat) { 
        case "category one":
        subCat = '<option value="sub1">Sub Category One</option>';
        break;
        case "category two":
        subCat = '<option value="sub2">Sub Category Two</option>';
        break;
    }

    $("#subcategory").html(subCat);
})

过滤效果很好。但是，我提交了搜索表单并转到了结果页面，然后当我点击浏览器“返回”按钮时。子类别再次变为“ - 所有子类别 - ”，没有保存数据。直到我做出另一个选择来触发更改事件，没有显示任何内容。我如何改进我的答案？

Answer 1

我之前使用过网页内存缓存方法来保存整个表单：Using_Firefox_1.5_caching。它还缓存了JavaScript状态，但是为了使其正常工作，您需要记住很多设置。

在您的情况下，因为您只想保存<select>数据。我认为使用document.cookie是一个很好的解决方案：

$('#category').on("change", function () {
    var cat = $(this).val();
    var subCat = "";
    switch (cat) {
        case "one":
            subCat = '<option value="sub1">Sub Category One</option>';
            break;
        case "two":
            subCat = '<option value="sub2">Sub Category Two</option>';
            break;
    }
    setCookie('select', cat);
    $("#subcategory").html(subCat);
})

var sel = getCookie('select');
if (sel) {
    /* if cookie key 'select' is set change the '#category' selected value 
      and trigger the change() event.*/
    $('#category').val(sel).trigger('change');
}

//Cookie functions for setting and retrieving, the duration I set is 24hrs only.
function setCookie(key, value) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
    var key = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return key ? key[2] : null;
}

请参阅此jsfiddle。

浏览器返回时选择选项丢失

1 个答案: