Überprüfen Sie, ob wählen, ist die Anzeige-Optionen

Können Sie versuchen, hören Sie auf klicken Sie auf, blur und key-press-Ereignis. Ich bin gerade mal ein open variable true or false auf jedem event.

JS:

   //if menu is open then true, if closed then false
   //we start with false
   var open = false;
   //just a function to print out message
   function isOpen(){
       if(open)
          return "menu is open";
       else
          return "menu is closed";
   }
   //on each click toggle the "open" variable
   $("#myselect").on("click", function() {
         open = !open;
         console.log(isOpen());
   });
   //on each blur toggle the "open" variable
   //fire only if menu is already in "open" state
   $("#myselect").on("blur", function() {
         if(open){
            open = !open;
            console.log(isOpen());
         }
   });
   //on ESC key toggle the "open" variable only if menu is in "open" state
   $(document).keyup(function(e) {
       if (e.keyCode == 27) { 
         if(open){
            open = !open;
            console.log(isOpen());
         }
       }
   });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option selected>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>

Nach der Lektüre, Ich erkannte, dass die Option-tags sind nicht "üblich" DOM-Elemente. Dann, ist nicht so leicht zu kontrollieren, Sie (statt Sie überprüfen, klicken Sie auf Unschärfe, und die Kombination von anderen Methoden, als wir den Versuch gestartet, vor).

Nun Ich habe es geschafft Sie endlich gefunden, die Lösung in eine Mischung von der ersten Idee, die wir hatten, dann, gerade krank erklären, die anderen möglichen Lösungen, die Sie und all die Dinge, Ive gelernt, über wählt:

• Wenn Sie nicht hinzufügen eine Größe Attribut zu wählen, werden Sie nicht in der Lage sein zu erkennen, Tastendruck an der Zeit, Ihre offenen.

• Wenn Sie hinzufügen ein size-Attribut größer als 1, um die wählen Sie, es erkennt Tastendruck, wird aber Locker das format und wird in einer Liste angezeigt.

• Wenn Sie versuchen, verwenden Sie "offset", und ähnliches, um zu prüfen, ob die Option ist offen, ist das auch nicht funktioniert, weil die option Objekte haben keinen offset
  Funktionen... (Sie sind nicht usuarl DOM-Objekte)

• Klicken Sie auf/focus wird auch nicht genug sein, so bleibt der Fokus im auswählen nach "ESC", klicken Sie auf.

Dann, nachdem Sie all diese Dinge überprüft, ich denke, dass es nicht möglich ist, um es in eine Reine HTML-Art, ohne dabei eine Menge auf/Unschärfe steuert, wie zuvor beantwortet.

Trotzdem, zu klären, es gibt viele jquery librarys, die Ihnen helfen zu simulieren, ein select/option dropdown und zu kontrollieren, wenn seine öffnen.

Ich hoffe, diese Antwort löst deine Frage. Überprüfen Sie diese funktionale fiddle Ive für Sie vorbereitet, um zu zeigen, das jquery dropdown Weg:

JS:

$('#jq-dropdown-1').on('show', function(event, dropdownData) {
  console.log("SHOWN");
}).on('hide', function(event, dropdownData) {
  console.log("HIDDEN");
});

HTML:

<link rel="stylesheet" href="https://rawgit.com/claviska/jquery-dropdown/master/jquery.dropdown.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/claviska/jquery-dropdown/master/jquery.dropdown.min.js"></script>

<a href="#" data-jq-dropdown="#jq-dropdown-1">dropdown</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
  <ul class="jq-dropdown-menu">
    <li><a href="#1">Item 1</a>
    </li>
    <li><a href="#2">Item 2</a>
    </li>
    <li><a href="#3">Item 3</a>
    </li>
    <li class="jq-dropdown-divider"></li>
    <li><a href="#4">Item 4</a>
    </li>
    <li><a href="#5">Item 5</a>
    </li>
    <li><a href="#5">Item 6</a>
    </li>
  </ul>
</div>


<button id="clickme">click me</button>

Sind die docs Ive Lesen um es zu verstehen:

• jQuery keypress/keyup/etc Ereignisse, die nicht entlassen werden, wenn die select-box wird erweitert

• Wie zu erkennen escape-Taste drücken mit JavaScript oder jQuery?

• jQuery Keypress-Ereignis: Enter-Taste

• Keypress-Ereignis auf die gewählten single wählen

Lösung:

select ist ein Eingang, es hat einen Fokus-Zustand, so dass, wenn Sie fokussiert ist in der Liste(Optionen) wird angezeigt, wenn es nicht in der Liste der Optionen verschwinden. Also:

$("#myselect").on("click", function() {
    if ($("#mySelect").is(":focus")) {
        console.log("displayed");
    } else {
        console.log("not displayed");
    } 
});

Hoffe, das hilft.