检查选择是否显示选项 [英] Check if select is displaying options

问题描述

我有以下HTML代码：

< select>< ;选择选项> Test 1< / option>< option> Test 2< / option>< option> Test 3< / option>< / select>

如何检查< $>< / code>< code>< select> 会显示出来吗？例如，这被认为是显示< select> 的< option> p>

这被认为是< select> < option> c $ c>不显示：

---

我试过这个：

< （click，function（）{if（$（＃myselect option）是一个非常简单的方法， ）.length == 0）{console.log（not displayed）;} else {console.log（displayed）;}}）;

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

但控制台日志一直显示

---

所以我该如何做到这一点？

---

编辑1：

不起作用，因为当我点击选择元素来显示选项，然后再次点击它，尽管 select 仍然是焦点，但不会显示选项。

---

编辑2：

足够的，基本上我希望控制台记录显示或不显示用户点击选择或选项打开变量转换为 true或false 。

  //如果菜单打开，则返回true，如果关闭，则返回false //我们以false开头false open = false; //只是一个函数来打印出消息函数isOpen（）{if（open）returnmenu is open;否则返回菜单关闭; } //在每次点击时打开打开变量$（＃myselect）。on（click，function（）{open =！open; console.log（isOpen（））;}）; //在每个模糊上切换打开变量//仅在菜单已处于打开状态时触发$（＃myselect）。on（blur，function（）{if（open）{open =！ open; console.log（isOpen（））;}}）; //在ESC键上仅当菜单处于打开状态时才切换打开变量$（document）.keyup（function（e）{if（e.keyCode == 27）{if（open）{open =！ open; console.log（isOpen（））;}}}）; <$ code> 

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

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

解决方案

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>

这篇关于检查选择是否显示选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！