为什么Firefox没有显示正确的默认选择选项?

时间:2009-09-25 19:44:43

标签: firefox select caching

我正在制作一个网络应用来管理产品SKUS。其中一部分是将SKU与产品名称相关联。在表格的每一行上,我列出一个SKU并显示带有产品名称的<select>框。当前与数据库中该SKU关联的产品被赋予类似selected="selected"的属性。这可以通过AJAX进行更改和更新。

确切地说,产品<option> s - 103有很多 - 此列表会在每行的<select>中重复。

从页面上的另一个输入,我使用jQuery AJAX请求添加新的SKU /产品关联,并清楚地表明它们是立即添加的,我将它们插入 top 桌子有一点突出效果。随着SKU数量增加到10左右,如果我刷新页面(将所有内容从按产品名称排序的数据库中加载回来),Firefox会默认显示一些错误的选项。它显示哪个不正确的选项并不一致,但它似乎混淆了页面重新加载之前存在的选项。

如果我使用Firebug检查<select>,则select="selected"位于正确的<option>标记上。刷新页面(或离开并重新键入此页面的URL以使其返回)不会使其正确显示,但难以刷新(Ctrl + F5)

Chrome和IE7都首先正确显示了这一点。

我的理论是,这是Firefox的错误缓存策略的结果。听起来不错吗?有什么方法可以在我的代码中说“如果这个页面被刷新,那就刷新它 - 从头开始​​重新加载所有东西?”

更新

为了解决这个问题,我改变了策略。

  • 以前,我在每个表行上放置一个<select><option>个列表,并将当前值设置为默认值
  • 现在,我将当前值放在<span>中。如果用户点击“更改”按钮,我将<span>替换为<select>,“更改”按钮变为“确认”按钮。如果他们更改了选项并单击确认,则AJAX会更新数据库,<select>将返回<span>,这次使用新值。

这有两个好处:

  • 修复了上述错误
  • 页面上需要更少的DOM元素(所有多余的<option> s)

11 个答案:

答案 0 :(得分:100)

我遇到了类似的问题,但在将autocomplete="off" HTML属性添加到每个选择标记后,它都有效。 [我使用的是Firefox 8]

答案 1 :(得分:45)

Firefox会在您刷新时保留您选择的表单元素。这是故意的。 Ctrl + F5是一个“硬”刷新,它会禁用此行为。

-

如果你在Mac上,或者Command + Shift + R

答案 2 :(得分:14)

阻止Firefox缓存上次选择的选项的一种简单方法是删除页面卸载中的所有选项元素。例如(假设jQuery):

$(window).unload(function() {
  $('select option').remove();
});

答案 3 :(得分:11)

我有同样的问题。我试图根据选择的选项=“已选择”来更改选择的值,但Firefox无法正常工作。它总是默认为第一个选项。

当我这样做时,Chrome,Safari等工作了:

$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );

......但这不适用于FF。

所以我试过了:

$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

它有效。

jQuery v1.9.1

答案 4 :(得分:6)

我通过将autocomplete =&#34; off&#34;在隐藏的输入上。

答案 5 :(得分:4)

虽然这是一个老问题,但是下面的解决方案可以帮助某人

在Firefox中,我注意到&#34;已选择&#34;除非您将选择放在表单中,表单具有名称属性,否则属性将无效。

<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>

再次记住:

  1. 表单必须包含&#34; 名称&#34;属性和
  2. &#34;的选择&#34;必须在表格内。

答案 6 :(得分:0)

Firebug正好具有缓存禁用功能。

更深层次的长期解决方案是弄清楚如何设置无缓存标头服务器端。您使用的是哪种Web服务器?

答案 7 :(得分:0)

每次我在Firefox中选择奇怪的选项错误都是因为我有多个标记为选中的选项。你确定只有一个标记为这样吗?如果你用AJAX改变它,你似乎可以很容易地摆脱困境。

答案 8 :(得分:0)

仅供参考:为了阻止Firefox在页面重新加载后恢复之前选择的选项,您可以将包含<form>选项的整个<select>放在<iframe>内。

当选择框位于<iframe>并重新加载容器页面时,Firefox最终会像所有其他浏览器一样,只需重置选择选项。

答案 9 :(得分:0)

感谢@BananaDeveloper(https://stackoverflow.com/a/8258154/2182349)-这是我在应用程序中的单个页面上解决此问题的解决方案

我不想自定义现成的/开源应用程序代码

<Files "page_that_does_not_work.php">
        SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE
        Substitute 's/<select/<select autocomplete="off"/n'
        Substitute 's/<form/<form novalidate/n'
</Files>

mod_substitute https://httpd.apache.org/docs/2.4/mod/mod_substitute.html的Apache文档

感谢:https://serverfault.com/questions/843905/apache-mod-substitute-works-in-curl-but-not-on-browser使用 SetOutputFilter

答案 10 :(得分:-1)

我已经想通了。如果在带有no-cache标头的HTML上放置onunload或$(window).unload(jquery),Firefox会重新加载页面并从后退按钮初始化DOM。