Firefox在页面刷新时不会刷新选择标记

Question

Firefox在页面刷新时不会刷新选择标记

6

我遇到了一个问题，用户可以使用select标签选择手机品牌，然后jquery页面将只显示这些手机。感谢stackoverflow上的人们的帮助，在每个浏览器上都很好运行，但在Firefox上却出现问题。由于某种原因，当我刷新页面时，select标签显示上次选定的选项，但是页面显示所有可用的手机，这是设计上不应该出现的。有没有关于如何使Firefox刷新select标签的建议或建议？我无法在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());
        }
    });
});

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

- xoam

它在我的Firefox上运行良好。清除浏览器缓存，看看会发生什么。 - Shyju

@Shyju - 这才是问题的关键所在；真正的用户不可能被要求清除缓存。 - Eliran Malka

4个回答

9

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

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

- Kornel

6

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

- user1809913

1

每次都给选择标签取一个不同的名称，像这样：

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

这对我有用。

- John Cleese

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eliran Malka · Accepted Answer

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

由于用户会自行行动，因此您必须提供一种解决方案来涵盖两种情况。这可以通过采取以下几种方法之一来实现：

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

参考资料

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