在 Firefox 中单击选择会立即导致选项下拉菜单关闭答案

【问题标题】：Single clicking on a select in Firefox immediately causes the options dropdown to close在 Firefox 中单击选择会立即导致选项下拉菜单关闭
【发布时间】：2012-10-30 04:29:57
【问题描述】：

出于某种原因，并且仅在 Firefox 中，具有多个选项的选择框会在单击选择后立即消失。

选择的内容不会被不断地重写，只有一个事件处理程序可以改变。而且我基本上使用 Bootstrap 进行样式设置。

对为什么会发生这种情况有任何想法吗？

【问题讨论】：

这发生在我身上，select 在 label 中。如果您无法将您的select 移出label，这里有一个快速而肮脏的技巧，可以让您的下拉菜单保持打开状态：<label onclick="return false;">

标签： twitter-bootstrap firefox select drop-down-menu

【解决方案1】：

当我看到这个问题时，问题是将多个 <select> 控件包装在同一个 <label> 中

Chrome 似乎可以很好地处理此问题，但 Firefox 会在单击任何后续 <select>s 时尝试打开第一个 <select>。

解决方案是要么不将它们包装在 <label> 中，要么仅将第一个选择包装在标签中。

演示： http://jsfiddle.net/lsirivong/jmeGv/

【讨论】：

【解决方案2】：

即使这个问题已经很老了，我只是在寻找相同的症状时偶然发现了它。

由于某些原因，Firefox 在页面上绘制到画布元素时会关闭选择元素。在我的用例中，我能够通过在任何选择输入处于焦点时不更新画布来解决此问题：

if (jQuery('select:focus').length > 0) {
    return; //Skip rendering while select is in focus
}

希望这能帮助那些拼命想弄清楚为什么他们的下拉菜单立即关闭的人。

【讨论】：

【解决方案3】：

我今天遇到了同样的问题，在苦心地将我的代码一分为二后，我发现这是因为filter: brightness(1.4); CSS 属性影响了选择元素。我不知道为什么这对 Firefox 来说很困难，但希望这对某人有用。

【讨论】：