检查select是否显示选项

Question

我有以下HTML代码:

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

如何检查是否显示了<option>s <select>？例如,这被视为显示的<option>s <select>:

这被认为是没有显示的<option>s <select>:

---

我试过这个:

$("#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>

但控制台记录"始终显示".

---

那我该怎么做呢？

---

编辑1:

如何检查选择元素是否仍然"打开"/活动与jquery的答案不起作用,因为当我单击select元素以显示选项然后再次单击它时,即使select仍然聚焦,也不显示选项.

---

编辑2:

以防万一我不够明确,基本上我希望控制台记录"显示"或"不显示"用户点击select或者options

Answer 1

您可以尝试聆听点击,模糊和按键事件.我只是在每个事件上切换一个open变量true or false.

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