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）时，FireFox将缓存表单值（包括F5框的选定值）。但是，如果用户选择执行硬刷新（Ctrl+F5），则不会从缓存中提取这些值，并且您的代码将按预期工作。

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

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

参考

注意： 我们已在linked SO post以及评论中建议您简单地转换autocomplete关闭。然而，这不是最好的解决方案 - 有两个原因： a。兼容性： autocomplete是HTML5 attribute，因此我们限制了我们的选择， 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

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

Answer 4

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

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

这对我有用。

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

4 个答案:

参考