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

Nat*_*ong 67 firefox select caching

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

确切地说有很多产品<option>s - 103 - 这个列表<select>在每行重复.

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

如果我检查<select>使用的Firebug,那么它就select="selected"在正确的<option>标签上.刷新页面(或者返回并输入此页面的URL以返回)不会使其正确显示,而是刷新(Ctrl + F5).

Chrome和IE7都首先正确显示.

我的理论是,这是Firefox的错误缓存策略的结果.听起来不错吗?有没有什么办法可以在我的代码中说"如果这个页面刷新了,那么刷新一下 - 从头开始​​重新加载一切?"

更新

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

  • 以前,我在每个表行上放置一个<select>带有长列表的<option>s,并将当前值设置为默认值
  • 现在,我把当前值放在一个<span>.如果用户单击"更改"按钮,我将替换为<span>a <select>,"更改"按钮变为"确认"按钮.如果他们更改了选项并单击确认,AJAX将更新数据库,并且这次使用新值<select>返回到a <span>.

这有两个好处:

  • 它修复了上面描述的错误
  • 它需要在页面上较少的DOM元素(所有这些多余<option>S)

小智 102

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

  • @ doABarrelRoll721**因为它有效!!!**其他答案没有提供任何非脏的JS方法来解决这个问题.这按预期工作,是解决此问题的最正确方法(iframe解决方案很糟糕).除非你是W3C铁杆粉丝,否则添加此属性在不支持它的浏览器中没有任何错误. (6认同)
  • 这似乎有效,但它不是有效的HTML. (2认同)
  • 我在 Firefox 44.0 版(2016 年 1 月)上遇到了同样的问题。并且这个解决方案仍然有效。 (2认同)
  • @doABarrelRoll721:比什么更喜欢这个?jQuery hack 还是玩弄 iframe?请为我们提供更好的解决方案。 (2认同)

Ted*_*rek 45

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

-

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

  • -1解释了问题,但没有解释如何通过添加`autocomplete = off`来解决它 (14认同)
  • @JohnMagnolia autocomplete不是w3c有效的 (2认同)

小智 14

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

$(window).unload(function() {
  $('select option').remove();
});
Run Code Online (Sandbox Code Playgroud)


小智 11

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

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

$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
Run Code Online (Sandbox Code Playgroud)

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

所以我尝试过:

$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );
Run Code Online (Sandbox Code Playgroud)

它的工作原理.

jQuery v1.9.1


小智 6

我通过在隐藏的输入上放置autocomplete ="off"使其工作.


Rak*_*oni 5

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

在Firefox中,我已经注意到,“选择”属性不会工作,除非您将选择一个内部形式,其中的形式所具有的name属性

<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>
Run Code Online (Sandbox Code Playgroud)

再次记住:

  1. 表单必须具有“ 名称 ”属性,并且
  2. 选择 ”必须在表格内。