Firefox不刷新页面刷新时的选择标记

Question

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

感谢人们对堆栈溢出的帮助,现在每个浏览器都可以运行,但是firefox.出于某种原因,当我刷新页面时,select标签显示最后选择的选项,但页面显示所有可用的手机.有没有人有任何建议或建议让firefox刷新选择标签？我无法在js.fiddle上显示它,因为它不会发生在那里所以这里有一个链接:

http://davidarabis.com/test/test.html

以下是代码:

<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

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

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

• 处理每个页面刷新:添加一些重置代码以设置window.onbeforeunload事件侦听器内的默认选择状态.
• 在DOM ready处理程序的开头添加该代码.
• 使用来自Ted Pavlic博客的帖子中描述的cookie 来检测页面刷新并对其进行操作(在那里放置相同的代码).
• 在服务器端设置no-cache标头,从而强制获取相关资源.

参考

• window.onbeforeunload 在Mozilla开发者网络上
• 关于FireFox表单值缓存的stackoverflow上的帖子
• 关于2009年该功能的博客文章
• 另一篇关于2008年特色的博客文章

注意:已在链接的SO帖子以及评论中建议简单地autocomplete关闭.然而,这不是最好的解决方案 - 有两个原因:a.兼容性: autocomplete是一个HTML5属性,因此我们限制了我们的选择实现,并且b.语义:目的是处理页面刷新的情况.将autocomplete被用于控制会话历史缓存并管理所提示窗体控件.如果此实施在未来发生变化,那么该解决方案将会中断.

Answer 2

我想我有更简单的解决方案.文档准备好后,为什么不将select设置回索引0？它可能看起来像这样:

$('.manufacturers').prop('selectedIndex',0);

所以你的脚本可能如下所示:

$(document).ready(function() {

    $('.manufacturers').prop('selectedIndex',0);

    $('.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 3

如果您的 select 标签在表单内，您只需向其中添加属性autocomplete="off"，它就会按预期运行。