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

我正在寻找一种方法来确定/何时<select>元素的菜单已打开。我不需要强迫它打开或关闭，只需确定它在给定时间是打开还是关闭。有没有办法确定<select>下拉菜单是否打开？

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

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

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

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

对于我自己的用途，我只是跟踪是否选择使用 onfocus和 onblur。我假设菜单如果没有关注就没有办法开放，这似乎在我测试过的所有浏览器中都成立。它实际上并没有告诉我菜单何时打开，但它告诉我何时不能打开，这对我的目的来说足够好。

来源

2010-04-25 Robert

您可以在选定的option子元素与mouseenter事件发挥你只能在他们，如果选择菜单打开与select元素，当你打开它平时扔在click事件进入，或者也。

要测试在一个精确的时刻，如果它的开放或不，我认为是不可能的。

来源

2010-04-25 19:12:44 maid450

仅供参考 - IE的后续版本打开哪个不火的平常事件的自定义选择列表菜单。基本上，当你打开一个选择列表，你的鼠标现在悬停在与DOM无关的事情上 – JDandChips 2014-08-14 09:30:10

在Internet Explorer中选择元素是非常棘手的。我不认为有任何方法可靠地确定是否开放或关闭。

来源

2010-04-25 19:03:45

我可以看到选择是否打开，然后关闭时如果用户选择一个新的选项，或完全模糊选择。但是，如果您单击相同的选项，或者只是单击选择一次（关闭它但不模糊它），它仍然显示“关闭”。研究更完整的解决方案。所以，希望这个答案有修改...

<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：添加鼠标松开 - 现在的作品！

来源

2010-04-25 19:14:55 hookedonwinter

我认为这个工作现在..它有时多次登录“出”。我认为我没有涉及的唯一情况是如果您打开选择，选择选定的选项，并且不要移动鼠标。更多来！ – hookedonwinter 2010-04-25 19:19:14

最近编辑..它现在的作品！ – hookedonwinter 2010-04-25 19:31:38

我不知道这是应该做什么。当我点击并释放菜单时，它会记录“下”和“下”。但菜单仍处于打开状态。看起来你只是在听我提到的事件，但出于某种原因使用jQuery。我错过了什么吗？ – Robert 2010-04-25 20:26:39

-1

更完整的解决方案是：

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

来源

2015-10-09 14:12:39

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

回答

相关问题