Question

我正在寻找一种方法来确定<select>元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它是否在给定时间打开或关闭。

我可以收听焦点/模糊，mouseup / mousedown等事件，但我认为我无法可靠地从这些事件中找出菜单的状态。例如，mousedown后跟mouseup可能意味着用户单击并拖动到选择并释放（在这种情况下菜单现在已关闭）或单击并释放以打开菜单（在这种情况下菜单打开）。下拉菜单的特定行为似乎也与浏览器有关。

我知道如果我滚动自己的下拉菜单，我可以这样做，但我更喜欢使用<select>。

有没有可靠的方法来确定下拉菜单是否已打开？或者这是Javascript无法知道的东西？

结论：似乎没有任何可靠的方法来确定选择菜单是否打开，无论是通过询问对象还是通过侦听它触发的事件。

对于我自己的使用，我只是使用 onfocus 和 onblur 来跟踪选择是否具有焦点。我假设菜单无法在没有焦点的情况下打开，这似乎在我测试的所有浏览器中都适用。它实际上并没有告诉我菜单何时打开，但它告诉我何时不能打开，这对我的目的来说已经足够了。

Answer 1

您可以在select的mouseenter子元素中使用option事件，因为只有在选择菜单打开时，或者click上的select事件，您才可以输入元素，通常在打开它时抛出。

在一个精确的时刻测试它是否开启我认为是不可能的。

Answer 2

在Internet Explorer中，选择元素非常棘手。我认为没有办法可靠地确定一个人是开放还是关闭。

Answer 3

我可以看到选择是否打开，然后当用户选择新选项时关闭，或者完全模糊选择。但是，如果您单击相同的选项，或只是单击选择一次（关闭它但不模糊它），它仍然显示“向下”。致力于更完整的解决方案。所以，期待这个答案有编辑......

<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>

编辑：添加了mouseout

Edit2：添加了mouseup - 现在可以使用了！

Answer 4

更完整的解决方案是：

<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>

有没有办法确定<select>下拉菜单是否打开？</select>

4 个答案: