火狐浏览器不刷新页面刷新时选择标签

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

感谢堆栈溢出人员的帮助，现在这在除 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());
        }
    });
});

提前感谢您的任何建议或帮助。

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

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

处理每次页面刷新：添加一些重置代码以在window.onbeforeunload事件侦听器中设置默认的选定状态。
将该代码添加到 DOM ready处理程序的开头。
使用 cookie，如 Ted Pavlic 博客中的这篇文章中所述，检测页面刷新并对其采取行动（将相同的代码放置在那里）。
在服务器端设置无缓存标头，从而强制获取相关资源。

引用

Mozilla 开发者网络上的window.onbeforeunload
关于 FireFox 表单值缓存上的堆栈溢出的帖子
2009 年关于该功能的博客文章
另一篇关于该功能的博客文章可追溯到2008

注意：在链接的SO帖子以及评论中，建议简单地关闭autocomplete。然而，这不是最好的解决方案——目的是处理页面刷新的情况。该autocomplete用于控制会话历史记录缓存和管理表单控件的提示。如果将来此实现发生变化，该解决方案将中断。

我想

我有更简单的解决方案。为什么不在文档准备就绪时将选择设置回索引 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());
        }
    });
});

重新加载后，选择将返回到第一个位置。

如果您的选择标签位于表单中，您只需将属性autocomplete="off"添加到表单中，它就会按预期运行。

每次都给 select 标签指定一个不同的名称怎么样，如下所示：

$random_id = mt_rand(1, 999);
$select_name = "myselect" . $random_id;
… 
<select name="< ?php echo $select_name; ?>">
…

这对我有用。

引用

相关内容

最新更新

热门标签：