jquery - Firefox 在页面刷新时不刷新选择标签

Question

我遇到了一个问题，我有一个选择标签，用户可以用它来选择手机品牌，然后使用 jquery 的页面只会显示这些手机。

感谢 stack overflow 上的人的帮助，这现在在除 firefox 之外的所有浏览器上都能正常工作。出于某种原因，当我刷新页面时，选择标签显示了最后选择的选项，但页面显示了所有可用的手机。有没有人对让 firefox 刷新选择标签有任何建议或建议？我无法在 js.fiddle 上显示它，因为它不会在那里发生。

代码如下:

<select class="manufacturers">
    <option class="selected" value="all">All</option>
    <option value="motorola">Motorola</option>
    <option value="htc">HTC</option>
    <option value="lg">LG</option>
    <option value="samsung">Samsung</option>
    <option value="kyocera">Kyocera</option>
</select>

<div class="scroll-content">
    <ul class="manulist motorola">
        <li><a href="#">Motorola Triumph</a></li>
    </ul>
    <ul class="manulist htc">
        <li><a href="#">HTC WILDFIRE S</a></li>
    </ul>
    <ul class="manulist lg">
        <li><a href="#">LG Optimus Slider</a></li>
        <li><a href="#">LG Optimus V</a></li>
        <li><a href="#">LG Rumor Touch</a></li>
        <li><a href="#">LG Rumor 2</a></li>
        <li><a href="#">LG 101</a></li>
    </ul>
    <ul class="manulist samsung">
        <li><a href="#">Samsung Intercept</a></li>
        <li><a href="#">Samsung Restore</a></li>
        <li><a href="#">Samsung M575</a></li>
    </ul>
</div>

jquery:

$(document).ready(function() {
    
    $('.manufacturers').change(function() {
        var selected = $(this).find(':selected');
        $('ul.manulist').hide();
        if ($(this).val() == 'all') {
            $('.scroll-content ul').show();
        } else {
            $('.' + selected.val()).show();
            $('.optionvalue').html(selected.html()).attr(
                    'class', 'optionvalue ' + selected.val());
        }
    });
});

在此先感谢您的任何建议或帮助。

Answer 1

当刷新机制被正常激活时(F5)，FireFox 将缓存表单值(包括select 框的选定值)。但是，如果用户选择执行硬刷新 (Ctrl+F5)，则不会从缓存中获取这些值，您的代码将按预期工作。

由于用户会按照自己的意愿行事，因此您必须提供涵盖这两种情况的解决方案。这可以通过采取几种方法来完成:

• 处理每次页面刷新:添加一些重置代码以在 window.onbeforeunload 事件监听器中设置默认选择状态。
• 将该代码添加到 DOM ready 处理程序的开头。
• 使用 cookie，如 this post from Ted Pavlic's blog 中所述, 以检测页面刷新并对其采取行动(在此处放置相同的代码)。
• 在服务器端设置无缓存 header ，从而强制获取相关资源。

引用资料

• window.onbeforeunload on Mozilla Developer Network
• A post on stackoverflow on the FireFox's form values caching
• A blog post on the feature from 2009
• Yet another blog post on the feature dating 2008

注意:已在 linked SO post 上建议，以及评论中的此处，简单地关闭 autocomplete 。然而，这不是最好的解决方案——目的是处理页面刷新的情况。 autocomplete 用于控制 session 历史缓存和管理表单控件的提示。如果将来此实现发生变化，则该解决方案将失效。