Check if select is displaying options

Question

I have the following HTML code:

<select>  <option selected>Test 1</option>  <option>Test 2</option>  <option>Test 3</option>  </select>

How do I check if the <option>s of the <select> are displayed? For example, this is considered as the <option>s of the <select> are displayed:

And this is considered that the <option>s of the <select> are not displayed:

---

I have tried this:

$("#myselect").on("click", function() {      if ($("#myselect option").length == 0) {          console.log("not displayed");      } else {          console.log("displayed");      }   });

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

But the console logs "displayed" all the time.

---

So how can I achieve this?

---

EDIT 1:

The answers at How to check if an select element is still “open” / active with jquery does not work because when I click the select element to display the options then click it again, the options are not displayed even though the select is still focused.

---

EDIT 2:

Just in case I wasn't explicit enough, basically I want the console to log "displayed" or "not displayed" the user clicks on the select or the options

Answer 1

You can try listening on click, blur and key press event. I am just toggling a open variable to true or false on each of the event.

   // 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());           }         }     });

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