Jquery cookie记住下拉菜单的最后状态答案

【问题标题】：Jquery cookie to remember last state of drop down menuJquery cookie记住下拉菜单的最后状态
【发布时间】：2011-12-13 03:22:39
【问题描述】：

谁能帮我解决这个问题，我在互联网上找不到在 jQuery 中执行此操作的脚本。我需要记住下拉菜单的最后状态，以便在页面加载时已经选择了下拉选项。 cookie 过期日期应该是 90 天，或者让我在脚本中指定。因为我已经在我的页面上使用了 jQuery，所以我希望这个 cookie 脚本使用 jquery，jquery cookie 插件。先感谢您。我不是程序员，但我试试看。

<body onLoad="GETcookie()">
<select onChange="SETcookie()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

【问题讨论】：

咳咳。 你不需要 jQuery 来管理 cookie。只需找到一个 Javascript 设置来为您管理它。 </rant>
读到这里，后面还有有用的函数：quirksmode.org/js/cookies.html
(虽然我有点希望 jQuery 库包含一个 $.cookie() 函数，其工作方式类似于 $.data()，因为 cookie 在 Javascript 中有点麻烦。 </zip>)
electrictoolbox.com/jquery-cookies

标签： jquery cookies drop-down-menu

【解决方案1】：

使用我包含的插件，您可以获取和设置 cookie。

您的代码看起来有点像这样：

//checks if the cookie has been set

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(), { expires: 90, path: '/'});

});

这是select 的样子：

<select class="select_class">
    <option value="1">Row 1</option>
    <option value="2">Row 2</option>
    <option value="3">Row 3</option>
</select>

这是 jsFiddle 上的一个演示：http://jsfiddle.net/RastaLulz/3HxCF/3/

这里是 jQuery cookie 插件，如果你还没有的话：http://pastebin.com/CBueT8LP

【讨论】：

太棒了。一直在寻找这样的东西 3 天了
这仅适用于选择框，但如果有多个选择框，它只会记住第一个。此代码可以用于多个选择框吗？

【解决方案2】：

首先不要做body onLoad（应该是小写的onload），但在我的例子中你不需要你的onload和onchange 但是：

// This replace onload
$(function() {
  // Read your cookie and other things up to you to do...
  $.cookie('the_cookie');

  // on change of your select
  $('select').on('change', function() {
    // Set the cookie
    $.cookie('the_cookie', 'the_value', { expires: 90, path: '/'});
  });

});

PS：我的脚本是 jQuery 1.7 (for the on)，所以看看你是否是最新的！

编辑：设置 90 天过期

【讨论】：

您能否在jsfiddle.net 中给我一个示例，因为我尝试过但没有成功。再次不是程序员，一定是在某个地方搞砸了。谢谢。
Josh Foskett 刚刚在 jsfiddle.net/RastaLulz/3HxCF/3 上做了一个，你可以看看它的工作原理。