Firefox 忽略选项 selected="selected"答案

【问题标题】：Firefox ignores option selected="selected"Firefox 忽略选项 selected="selected"
【发布时间】：2023-03-27 13:50:01
【问题描述】：

如果您更改下拉菜单并刷新页面，Firefox 似乎会忽略 selected 属性。

<option selected="selected" value="Test">Test</option>

它实际上会选择您之前选择的选项（在刷新之前）。这最终对我来说是个问题，因为下拉菜单上触发了一个事件，它改变了其他事情。

有没有办法让 firefox 停止这种行为（除了在页面加载时触发另一个事件）？

【问题讨论】：

我现在面临这个问题，我使用$('option:selected').each(function(){ $(this).prop('selected',true); });修复它
我注意到这只发生在选择缺少名称属性的元素上
试试 autocomplete="off"

标签： firefox drop-down-menu refresh

【解决方案1】：

为每个选择标签添加autocomplete="off" HTML 属性。

（来源：https://stackoverflow.com/a/8258154/260080）

【讨论】：

这是我的偏好（非常感谢 Marco 和猴子扳手，在那里节省了我的几束头发）。您还必须将其添加到每个带有“值”或“已检查”属性的以及任何带有内容的中。
这绝对应该是正确的答案。像魅力一样工作。
这不是 w3c 有效的
在 Firefox Quantum 60.0.2 64 位中对我不起作用。 stackoverflow.com/a/12650918/470749 工作。
我将autocomplete="off" 直接添加到我的
标记中，而不是添加到表单中的每个字段中，并且效果很好。

【解决方案2】：

在 Firefox 中，我注意到“selected”属性将不起作用，除非您将 select 放在表单中，其中表单具有 name 属性。

【讨论】：

砰！这修复了 autocomplete="off" 没有的地方。
花了一个小时摸索 Firefox 78.0.2。我的表格上不需要名字，但给它一个名字可以缓解。

【解决方案3】：

刚刚遇到同样的问题，相信我已经为这种愚蠢的 Firefox 行为苦苦挣扎了 10 多个小时，我有 7 个下拉菜单，每个下拉菜单都会触发一个事件并填写 24 个隐藏的输入，因此您可以想象拥有正确的选择了 24 个错误输入值的选项！！！我最终找到的解决方案是使用 Javascript 添加这行代码来重置表单：

window.onload = function() { document.forms['MarkerForm'].reset(); };

PS：输入具有从数据库中提取的值，因此重置表单不会清空任何值，但在某种程度上告诉 firefox 回到地狱到 selected=selected 选项！

【讨论】：

这是正确答案。在选择元素上使用“自动完成”的答案是错误的，因为根据 W3，“自动完成”不是选择字段的有效属性，并且会导致“此时元素选择上不允许属性自动完成”。验证错误。

【解决方案4】：

只是 Firefox 在刷新时会记住您之前的选择。请尝试硬刷新。

另外，同样的问题在这里：https://stackoverflow.com/a/1505693/1069232

另见此处：https://bugzilla.mozilla.org/show_bug.cgi?id=274795

【讨论】：

似乎是firefox的一个功能。
这对我来说是正确的答案，在 2021 年仍然是同样的行为

【解决方案5】：

AFAIK，这种行为被硬编码到 Firefox 中。

您可以尝试在页面加载时将每个表单元素设置为其defaultValue。

【讨论】：

对表单中的所有元素执行此操作是否容易？
@monkey 使用 jQuery，它应该类似于 $(":input").val(this[0].defaultValue);（未经测试）；在普通 JS 中，遍历每个 document.getElementsByTagname("select")
虽然可能不是理想的解决方案，但这可行..您必须检查 getAttribute("selected")
仅供参考 - Marco Demaio 下面有一个更好的答案

【解决方案6】：

尝试禁用选择输入的autocomplete 属性...有时浏览器会因此而忽略select

【讨论】：

【解决方案7】：

我使用的是 FF 25.0.1

它忽略selected="" 和selected="selected"。

但如果我只是尝试selected，则选择该选项。

奇怪（不符合）的行为。我知道selected 是有效的 HTML5 并且它是最短的形式，但我通常编写的代码也会验证格式正确的 XML，因此我可以使用任何 XML 验证工具以非常严格的方式检查我的结果（并且数据交换非常简单...）

根据 W3C，这些变体应该对布尔属性有效：

HTML5:  boolAttr="" | boolAttr="boolAttr" | boolAttr
XHTML5: boolAttr="" | boolAttr="boolAttr"

我更喜欢第一个，因为它几乎与最后一个（不符合 xml 的）变体一样短，但应该同时验证为 XHTML5 和 HTML5。所以我希望 Mozilla 能修复它！

【讨论】：

【解决方案8】：

将选择包含在表单属性中，它将起作用。

<!-- will not work in firefox -->
<option selected="selected" value="Test">Test</option>

和

<!-- this will work in firefox -->
<form>
 <option selected="selected" value="Test">Test</option>
</form>

【讨论】：

【解决方案9】：

使用 .prop() 代替 .attr()

This does not work in firefox.
  $( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
use this one
  $( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

In other way
  $( this ).prop( 'selected', 'selected' );

【讨论】：

使用 .prop('selected', true); 或 .prop('selected', false); (jQuery) 启用/禁用 Firefox 和 Chrome 的工作。

【解决方案10】：

您可以在刷新页面之前在表单上调用.reset()。

【讨论】：

【解决方案11】：

尝试为下拉列表命名。

【讨论】：

【解决方案12】：

有名字就更好了

form id="UMForm" name="UMForm" class="form"

select 将采用 selected 属性

【讨论】：

【解决方案13】：

如果您更改选择并刷新页面，firefox 将恢复您对表单的更改，这就是您觉得选择不起作用的原因。尝试在新选项卡上打开链接，而不是刷新。

【讨论】：

这是真的，但似乎并没有解决我的问题。我仍然需要解决方法，因为当我刷新时 Firefox 恢复对表单的任何更改时，我的 onchange 事件不会触发。

【解决方案14】：

自动完成对我也不起作用。

这是我用 jquery 编写的 javscript 修复：

$('input[type="radio"][selected]').click();

【讨论】：

【解决方案15】：

<option selected="selected" value="Test">Test</option>

在这种情况下，这适用于 Chrome 和 Firefox。

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

我使用的是.attr() 而不是.prop()

【讨论】：

【解决方案16】：

要显示下拉列表的第一项，请使用ProjectName.ClearSelection();

在您的设计页面中添加行以在所有浏览器上运行，并将其放在页面加载后的代码中。

$(document).ready(function () {
    $("#content_ProjectName option[value='1']").prop("selected", true);
});

【讨论】：

【解决方案17】：

对我来说，上述解决方案均无效。如果没有设置，我必须明确设置选择：

if (foo.find(':selected').length === 0) {
    $(foo.find('option')[0]).attr('selected', 'selected');
}

【讨论】：

【解决方案18】：

这是我的解决方案：

var select = document.getElementById('my_select');
for(var i=0; i < select.options.length; i++){
    select.options[i].selected = select.options[i].attributes.selected != undefined;
}

我只是把它放在页面顶部（设置了适当的 id），它对我有用。将 getElementById 替换为页面上所有选择的循环，我将作为练习留给读者；）。

【讨论】：

【解决方案19】：

在工作中，我刚刚修复了一个错误，即选择框选项在同一网页上的 Chrome 中正确显示，但在 Firefox 中不正确。结果与上述问题完全不同，但可能是您遇到的问题。

在 Chrome 中，选择框字体颜色为黑色。出于某种原因，在 Firefox 中，选择框继承了容器的字体颜色，即白色。一旦我添加了一个 CSS 规则来强制选择框字体颜色为黑色，设置的值就会正确显示。

【讨论】：

【解决方案20】：

autocomplete="off" 或将其放在 form 中都不适合我。

起作用的是只使用选择的属性没有“值”，如下所示：

<option @(Model.Source == TermSource.Instagram ? "selected" : "")>
    Instagram
</option>
<option @(Model.Source == TermSource.Facebook ? "selected" : "")>
    Facebook
</option>

所以要么渲染<option selected>...</option>，要么只渲染<option>...</option>

【讨论】：