jQuery 可以判断当前是否显示了 <select> 元素的 <option> 吗？ [复制]答案

【问题标题】：Can jQuery tell if the <option>s of a <select> element are currently displayed? [duplicate]jQuery 可以判断当前是否显示了 <select> 元素的 <option> 吗？ [复制]
【发布时间】：2012-10-12 13:10:15
【问题描述】：

可能重复：
Is there a way to determine if a <select> dropdown menu is open?

我的客户希望我在用户与我们的<select> 元素交互时显示一些简单的说明，从而导致<option> 列表下拉（或“下拉”，我想，因为有些如果<select> 框下方没有太多空间，浏览器会向上打开）。然后，一旦用户做出新的选择并因此导致选项列表消失，或者如果他们只是关闭选项列表而不进行更改，说明应该会再次消失。

我认为我在使用 CSS/CSS3 选择器和 jQuery 事件来使诸如 <div> 之类充满指令的内容出现和消失方面经验丰富，但对于这种情况，我无法确定是否存在判断<select>框不仅仅是“活动”或“聚焦”时的方法 - 这两者都可以在“选择”框仍然关闭而不显示其选项列表 - 但实际打开。我测试过的 CSS 伪选择器或 jQuery 事件都没有让我“看到”，更不用说响应<select> 框的打开或关闭状态。

有谁知道如何设置触发器或编写取决于选项列表当前是否显示的 CSS 规则？

【问题讨论】：

你试过onchange、onfocus、onblur和onselect吗？他们都不适合你？
我从很久以前就发现了这个，Here 可能会帮助你...
以下问题。看起来很有趣
感谢大家找到这个问题的早期版本！我一直在做的所有搜索都包含“选项”或“选项”这个词，而这在副本中根本没有提到，所以我找不到它。我将把这个问题留在这里，关闭，以防稍后搜索的其他人也考虑到<option> 标签是否可见的问题。

标签： jquery html css select option

【解决方案1】：

如果$('myID:focus') 不够用，我怀疑还有其他方法。

【讨论】：

【解决方案2】：

类似

HTML

<select id="sselect">
    <option value="1st">1st</option>
    <option value="2nd">2nd</option>
    <option value="3rd">3rd</option>
</select>

<br><br>

<div id="ddiv"></div>

$('#sselect')
    .on('keyup', function() { $('#ddiv').show().text($(this).val()) })
    .on('mouseenter', 'option', function() { $('#ddiv').show().text($(this).val()) })
    .on('mouseleave', function() { $('#ddiv').hide() })

在这里看到它的工作：http://jsfiddle.net/RASG/QfMGR/

用 FF 15 测试

【讨论】：

不错的方法，但仅适用于鼠标操作。
而且它只在鼠标悬停在菜单上时有效，所以它甚至不能完全用鼠标。
@Manueru_mx: 好了 :) 键盘操作
尝试检查您的 keyup 处理程序中的密钥。即使我只是切换到选择框，也会显示 div。
@BoltClock♦：啊，明白了。进入它显示了div。好吧，OP 是一个非常有经验的用户，我相信他将能够弄清楚如何在选项卡上不显示 div。