Question

我正在尝试使用下拉菜单进行某些网站导航，并希望他们使用jQuery Cookie或localStorage记住他们上次选择的状态。但是，某些下拉列表会显示辅助下拉列表，其中包含更多选项。

基本设置是：

form
    fieldset
        select.select_class#select-writing
            option(value='') Select
            option(value='books') Books
            option(value='articles') Articles
            option(value='quotes') Quotes
            option(value='suggested-readings') Suggested Readings

    fieldset.hide#select-writing-books
        select.select_class
            option(value='') Choose a book...
            option(value='thoughts') Thoughts on Design
            option(value='trademark') Trademark Design
            option(value='iKnow') I Know a Lot of Things
            option(value='sparkle') Sparkle and Spin
            option(value='trademarkSelection') The Trademarks of Paul Rand — A Selection
            option(value='little1') Little 1
            option(value='listen') Listen! Listen!

            button.hide#select-writing-books-button(href="#") Go

我的JS是：

$('#select-writing').change(function() {
    if ($(this).val() == "books") {
        $("#select-writing-books").show();
    } else {
        $("#select-writing-books").hide();
    }

    if ($(this).val() == "articles") {
        $("#select-writing-articles").show();
    } else {
        $("#select-writing-articles").hide();
    }

    if ($(this).val() == "quotes") {
        $("#select-writing-quotes").show();
    } else {
        $("#select-writing-quotes").hide();
    }

    if ($(this).val() == "suggested-readings") {
        $("#select-writing-suggested-readings").show();
    } else {
        $("#select-writing-suggested-readings").hide();
    }
});

如果有人选择了具有第二个下拉列表的下拉列表，则它们仍然会在刷新/重新访问等时显示。

我尝试过使用带有此代码的jquery-cookie插件，但第二个下拉列表没有出现：

if($.cookie('remember_select') != null) {
    // set the option to selected that corresponds to what the cookie is set to
    $('.select_class option[value="' + $.cookie('remember_select') + '"]').attr('selected', 'selected');
}

// when a new option is selected this is triggered
$('.select_class').change(function() {
    // new cookie is set when the option is changed
    $.cookie('remember_select', $('.select_class option:selected').val());
});

代码可以工作，但是有更清晰，更简洁的方法来为其他几个下拉列表实例编写代码吗？

可在此处查看工作演示：http://paulrand.design/_r@nd20i5/_template-article.html

我还想使用插件SelectOrDie来设置下拉列表本身，但似乎存在一些冲突（http://vst.mn/selectordie/）。这方面的一个例子是：http://paulrand.design/_r@nd20i5/_template-list-with-thumbnails.html

Answer 1

如果您希望存储不同的访问/重新加载，则需要一个不在客户端的存储系统，因为当您重新加载页面时，javascript基本上会从头开始重新开始。

Cookie似乎是显而易见的选择，尽管本地存储也可以。基本上，你走在正确的轨道上。 Javascript中没有奇特的功能可以记住页面重新加载之间的变量值。你必须将它存储在页面之外的某个地方。

此外，如果您的站点有登录名，并且您希望使其与客户端无关，则可以使用AJAX将值存储在数据库中，每次select选择触发onChange时都写入它们。

无论哪种方式，每当用户进行更改时，您都必须将它们写在其他位置，然后在您需要或在页面加载时将它们全部读回。

多个下拉列表记得他们的最后一个状态 - jquery，cookies还是localStorage？

1 个答案: