我正在寻找一种方法来确定<select>元素的菜单是否/何时打开。我不需要强迫它打开或关闭，只需弄清楚它在给定时间是打开还是关闭。
我可以监听焦点/模糊、鼠标向上/鼠标向下等事件，但我认为我无法从这些事件中可靠地找出菜单的状态。例如，mousedown 后跟mouseup 可能意味着用户单击并拖动到一个选择并释放（在这种情况下菜单现在关闭）或单击并释放以打开菜单（在这种情况下菜单打开）。下拉菜单的特定行为似乎也可能取决于浏览器。
我知道如果我滚动我自己的下拉菜单我可以做到这一点，但我更喜欢使用<select>.
有没有可靠的方法来确定下拉菜单是否打开？或者这是Javascript无法知道的东西？
结论：似乎没有任何保证的方法来确定选择菜单是否打开，无论是通过询问对象还是通过侦听它触发的事件。
对于我自己的使用，我只是使用onfocus和onblur跟踪选择是否具有焦点。我假设没有焦点就无法打开菜单，这似乎适用于我测试过的所有浏览器。它实际上并没有告诉我菜单何时打开，但它告诉我何时无法打开，这对我的目的来说已经足够了。
您可以mouseenter在 select 的option子元素中使用事件，因为您只能在选择菜单打开时输入它们，或者也可以使用元素click上的事件select，通常在您打开它时抛出。
在一个精确的时刻测试它是否打开我认为是不可能的。
众所周知，选择元素在 Internet Explorer 中非常棘手。我认为没有任何方法可以可靠地确定一个是打开还是关闭。
我可以看到选择是否打开，然后在用户选择新选项或完全模糊选择时关闭。但是，如果您单击相同的选项，或者只是单击一次选择（关闭它但不模糊它），它仍然显示“向下”。致力于更完整的解决方案。所以，希望这个答案有编辑......
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
var selected
$( document ).ready(
function()
{
$( '#test' )
.mousedown( function(){ console.log( 'down' ); selected = $( this ).val() } )
.blur( function(){ console.log( 'out' ) } )
.change( function(){ console.log( 'out' ) } )
.mouseleave( function(){ console.log( 'out' ) } )
.mouseup( function(){
if( $( this ).val() == selected )
console.log( 'out' )
}
)
} // function
) // ready
</script>
<select id="test">
<option>1</option>
<option>2</option>
</select>
编辑：添加鼠标
Edit2：添加了 mouseup - 现在可以使用了！
更完整的解决方案是：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
var selected,selected2
$( document ).ready(
function()
{
$( 'select[id$="test"]' )
.mousedown( function(){
console.log( 'predown' );
if( $( this ).val() != selected ) {
console.log( 'down' );
selected = $( this ).val();
selected2=null;}
else
selected=null;} )
.blur( function(){ if (selected2==selected) {
console.log( 'outb' );
selected=null;
selected2=null;} } )
.mouseup( function(){ console.log( 'preoutu' );
if( $( this ).val() != selected || $( this ).val() == selected2 ) {
console.log( 'outu' );
selected=null;
selected2=null;
}
else
selected2=$( this ).val();
}
)
} // function
) // ready
</script>
<select id="1test">
<option>1</option>
<option>2</option>
</select>
<select id="2test">
<option>1</option>
<option>2</option>
</select>