<select> 드롭 다운 메뉴가 열려 있는지 확인하는 방법이 있습니까?

Question

<select> 요소의 메뉴가 열려 있는지 여부를 확인하는 방법을 찾고 있습니다. 열거 나 닫을 것을 강요 할 필요가 없습니다. 주어진 시간에 열리거나 닫히면 알아낼 수 있습니다.

포커스/흐림, 마우스 업/마우스 다운 등의 이벤트를들을 수는 있지만 그 이벤트의 메뉴 상태를 안정적으로 파악할 수는 없다고 생각합니다. 예를 들어 mousedown과 mouseup을 함께 사용하면 사용자가 클릭하여 드래그하여 선택 영역으로 드래그하여 릴리스 (이 경우 메뉴가 닫히는 경우)되거나 클릭 및 릴리스되어 메뉴를 열 수 있습니다 (이 경우 메뉴가 열려 있음). 또한 드롭 다운 메뉴의 특정 동작은 브라우저에 따라 다를 수 있습니다.

내 드롭 다운 메뉴를 굴리는 경우이 작업을 수행 할 수 있지만, <select>을 사용하는 것이 좋습니다.

드롭 다운 메뉴가 열려 있는지 확인할 수있는 확실한 방법이 있습니까? 아니면 Javascript가 알 수없는 무언가입니까?

결론 : 선택 메뉴가 열려 있는지 여부를 확인하는 데는 개체를 확인하거나 해당 이벤트를 수신하는 방법을 사용하는 것이 보장되지 않는 것처럼 보입니다. 내 자신의 사용을 위해

난 그냥 선택이 onfocus 및 및 위해 onblur 를 사용하여 포커스가 있는지 여부를 추적하고 있습니다. 포커스가 없어도 메뉴를 열 수있는 방법이 없다고 가정합니다. 테스트 한 모든 브라우저에서 해당 메뉴가 유지되는 것 같습니다. 메뉴가 열렸을 때 실제로 내게 말해주지는 않지만 은이 열리지 않을 때 알려주므로 내 용도에 충분합니다.

Answer 1

은 당신의 선택 option 자식 요소에 mouseenter 이벤트와 함께 재생할 수 있습니다.

정확한 순간에 테스트하려면 개방형인지 아닌지는 생각할 수 없습니다.

Answer 2

Internet Explorer에서 선택 요소가 악명 높은 것으로 알려져 있습니다. 나는 하나가 열려 있거나 닫혀 있는지 확실하게 결정할 방법이 없다고 생각한다. 당신은 단지 당신이 그것을 열 때 보통 던져 select 요소에 click 이벤트와도 선택 메뉴가 열려있는 경우 그들에 입력하거나, 수

Answer 3

선택 항목이 열려 있는지, 그리고 사용자가 새 옵션을 선택하거나 선택 항목을 완전히 흐리게하면 닫힐 때를 볼 수 있습니다. 그러나 동일한 옵션을 클릭하거나 선택을 한 번 클릭하면 (닫히지 만 흐리게 표시되지 않음) 여전히 "아래로"표시됩니다. 보다 완벽한 솔루션 개발. 지금 작동 - 추가와 mouseUp가 : Edit2가가로 마우스를

추가 : 그래서,

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

편집 ...이 대답은 편집이 기대!

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>