HTML 选择，在 DOM 中选择了正确的选项，但在 Firefox 中显示了错误的项目答案

【问题标题】：HTML select, correct option selected in DOM, but wrong item shown in firefoxHTML 选择，在 DOM 中选择了正确的选项，但在 Firefox 中显示了错误的项目
【发布时间】：2012-09-01 00:39:21
【问题描述】：

这其实是从another SO question整理出来的问题。

在此处的 jsFiddle 示例中，http://jsfiddle.net/5WrcD/2/show/ 当您更改一个 select 时，另一个会获得同步的值。请打开 Firebug 并展开两个 select 菜单尝试此操作。

当您首次加载页面并将 first select 更改为 20 时，两者上的 selected="selected" 在 DOM 中变为 20，但不会显示在显示中。

知道为什么会这样吗？

该示例使用Ember.js 库，但无论如何显示应该反映 DOM 状态对吧？

这个错误只发生在 Firefox 中，这是一个 Firefox 特定的问题

【问题讨论】：

@PeeHaa 这只是 Firefox 中的错误
@PeeHaa 抱歉，我标记了 firefox 忘记提及问题
@vol7ron 我在页面加载后尝试了$('select script').remove();，但没有帮助。
@vol7ron 它也看到了，在你尝试不同的组合后它会突然起作用。
在几次值更改后，它开始为我同步（FF 18 Nightly）。

标签： javascript jquery html firefox

【解决方案1】：

适用于 Chrome/Safari，不适用于 FF。也许这两个 Ember.js 警告意味着什么：

警告：默认情况下，计算属性很快就会被缓存。要在您的应用中启用此功能，请设置 ENV.CP_DEFAULT_CACHEABLE = true。 ember-0.9.8.1.js（第 65 行）
警告：{{view}} 助手影响模板的方式即将改变。以前，子视图中的模板将使用新视图作为上下文。很快，视图将在渲染其模板时保留其父上下文。您可以通过设置ENV.VIEW_PRESERVES_CONTEXT = true 提前选择加入新行为。有关详细信息，请参阅https://gist.github.com/2494968。您应该尽快更新您的模板；这个默认值很快就会改变，并且在 1.0 版本之前该选项将被完全取消。

更新 #1：

看起来关闭所有选定的（在创建元素之后）也有帮助。附加到脚本的末尾：

setTimeout( function (){ $('option').prop('selected',false); } , 100 );
// Anonymized as per Fabrício Matté's suggestion

注意：可能会有一个回调，您可以在其中执行此操作，而不是在 100 毫秒后自动运行它。

更新 #2：

看起来也可以不设置选项的属性，而是删除 Ember 创建的内容：

App.myController = Ember.Object.create({
   //content: 10    /* comment out, remove, or set to '' instead of 10 */
});

注意：我不使用 Ember，所以我不知道这会不会有什么影响

【讨论】：

事实是，如果您检查 DOM，selected 属性被设置为正确的option，它只是 firefox 在显示中显示错误的option。我正试图找出原因。
@sabithpocker：当我在 Firebug 中使用“照明”并突出显示相应的选择组时，它似乎可以工作
@sabithpocker：另外，我打算删除这个答案，因为它太大/笨重，不适合 cmets
+1 在我的 FF 中工作。您也可以在 setTimeout 中将其设为匿名函数，但这并不重要。
@vol7ron 非常感谢您花在这上面的时间，内容：'' 我猜在很多情况下解决方案应该可以 :)

【解决方案2】：

我刚刚通过为选择元素设置val 解决了类似的问题。

我的select 有两个条目，我想以编程方式（jQuery）激活第二个条目，这可以通过更改 selected 属性来完成，但是 Firefox 17.0 没有重绘选择，它没有显示新的选择option。

<select id="yesno">
<option value="true" selected="selected">Yes</option>
<option value="false">No</option>
</select>

这个 jQuery-Snippet 成功了，现在我在以编程方式修改它时看到 FF 17.0 中的选择“否”：

var yesnosel = $("#yesno");
yesnosel.val("false");
yesnosel.find("option").removeAttr("selected");
yesnosel.find("option[value='false']").attr("selected", "selected");

设置val 可能就足够了，但我还想要一个更新的selected option。

【讨论】：

【解决方案3】：

jQuery 的几行 =)

http://jsfiddle.net/xXC9t/

【讨论】：

感谢您的建议，但其目的是阻止一些错误的行为。您还可以查看 ember.js 库，了解为什么它比“jQuery”更适合可扩展的应用程序。