Есть ли способ определить, открыто ли раскрывающееся меню <select>?

Question

Я ищу способ определить, открыто ли меню элемента <select>. Мне не нужно заставлять его открываться или закрываться, просто выясните, открывается ли он или закрывается в определенный момент времени.

Я могу прослушивать события для фокусировки / размытия, наведения мышки / размытия и т. Д., Но не думаю, что смогу достоверно определить состояние меню по этим событиям. Например, mousedown, за которым следует mouseup, может означать, что пользователь щелкнул и перетащил к выделению и отпустил (в этом случае меню теперь закрыто) или щелкнул и отпустил, чтобы открыть меню (в этом случае меню открыто). Также вероятно, что конкретное поведение выпадающих меню зависит от браузера.

Я знаю, что смогу сделать это, если разверну свое собственное выпадающее меню, но я предпочитаю использовать <select>.

Есть ли надежный способ узнать, открыто ли раскрывающееся меню? Или это то, что Javascript не может знать?

Вывод: По-видимому, не существует какого-либо гарантированного способа определить, открыто ли меню выбора, либо путем запроса объекта, либо путем прослушивания событий, которые оно запускает.

Для собственного использования я просто отслеживаю фокусировку выбора, используя onfocus и onblur . Я предполагаю, что нет никакого способа открыть меню, не имея фокуса, и это, похоже, справедливо для всех браузеров, которые я тестировал. На самом деле оно не сообщает мне, когда меню открыто, но говорит, когда оно не может быть открытым, что достаточно для моих целей.

Answer 1

Вы можете играть с событием mouseenter в дочерних элементах select option, так как вы можете войти в них, только если открыто меню select, или также с событием 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,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>

Answer 4

Я могу видеть, открыт ли выбор, а затем, когда он закрывается, выбирает ли пользователь новую опцию или полностью размывает выбор. Однако, если вы щелкнете по той же опции или просто нажмете один раз на выделении (закрыв его, но не размывая), он все равно будет показывать «вниз». Работаем над более полным решением. Итак, ожидайте, что в этом ответе будут изменения ...

<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 - работает сейчас!