Firefox 在页面刷新时不刷新选择标签答案

【问题标题】：Firefox not refreshing select tag on page refreshFirefox 在页面刷新时不刷新选择标签
【发布时间】：2012-06-07 21:25:00
【问题描述】：

我遇到了一个问题，我有一个选择标签，用户可以使用它来选择手机品牌，然后使用 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());
        }
    });
});

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

【问题讨论】：

它在 Firefox 中对我来说很好用。清除浏览器缓存，看看会发生什么

标签： jquery html firefox html-select

【解决方案1】：

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

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

处理每次页面刷新：添加一些重置代码以在window.onbeforeunload 事件侦听器中设置默认选中状态。
将该代码添加到 DOM ready 处理程序的开头。
使用 cookie（如 this post from Ted Pavlic's blog 中所述）来检测页面刷新并对其进行操作（在此处放置相同的代码）。
在服务器端设置 no-cache 标头，从而强制获取相关资源。

参考文献

注意： 已在 linked SO post 以及 cmets 中建议关闭 autocomplete。然而，这并不是最好的解决方案——原因有两个：a.兼容性： autocomplete 是 HTML5 attribute，因此我们限制了我们的选择实现，并且 b。语义： 目的是处理页面刷新的情况。 autocomplete 用于控制会话历史缓存和管理表单控件的提示。如果此实施在未来发生变化，该解决方案将失效。

【讨论】：

或者只是在相关控件上使用autocomplete=off。
autocomplete 长期以来一直是非标准属性，因此使用它不会将您束缚在 HTML5 上。
我们更愿意遵守标准，不是吗？
感谢这完美的工作。我按照第二个链接上的建议使用了这个 jquery 代码，效果很好。 $(window).unload(function() { $('select option').remove(); });

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

不如每次给 select 标签取一个不同的名字，像这样：

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

这对我有用。

【讨论】：