6

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

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

4

4 回答 4

13

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

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

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

参考

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

于 2012-06-03T13:48:05.013 回答
8

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

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

于 2015-12-01T11:24:19.853 回答
6

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

于 2016-09-28T20:12:45.183 回答
1

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

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

这对我有用。

于 2021-02-02T19:35:20.540 回答