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

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

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

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

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

Заключение. Кажется, нет никакого гарантированного способа определить, открыто ли меню выбора, спросив объект или прослушивая события, которые он запускает.

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

Ответ 1

Вы можете играть с событием mouseenter в выборе дочерних элементов option, поскольку вы можете вводить их только в том случае, если открыто меню, или событие click в элементе select, которое обычно вызывается, когда вы откройте его.

Чтобы проверить в какой-то момент, если он открыт или нет, я думаю, что это невозможно.

Ответ 2

В браузере Internet Explorer особенно сложно выделить элементы. Я не думаю, что есть какой-либо способ надежно определить, открыт ли он или закрыт.

Ответ 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 - теперь работает!

Ответ 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>