检查选择是否显示选项

Question

我有以下 HTML 代码：

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

如何检查<select> 的<option>s 是否显示？例如，这被认为是显示<select>的<option>s：

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

---

我试过这个：

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

How to check if an select element is still “open” / active with jquery 的答案不起作用，因为当我单击 select 元素以显示选项然后再次单击它时，即使 select 仍处于焦点位置，选项也不会显示。

---

编辑 2：

以防我不够明确，基本上我希望控制台记录用户点击select或options的“显示”或“未显示”

Answer 1

not displayed 可以使用change 事件，displayed 可以使用focus 事件

$("#myselect").on({
  "change": function() {
    $(this).blur();
  },
  'focus': function() {
    console.log("displayed");
  },
  "blur": function() {
    console.log("not displayed");
  },
  "keyup": function(e) {
    if (e.keyCode == 27)
      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>

Answer 2

解决办法：

select 是一个输入，它有一个焦点状态，所以当它被聚焦时，列表（选项）将被显示，当它不是时，选项列表将消失。所以：

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

希望对您有所帮助。

Answer 3

阅读后，我意识到 Option 标签不是“普通”的 DOM 元素。那么，控制它就不是那么容易了（相反，您正在检查点击、模糊和组合其他方法，就像我们之前开始尝试的那样）。

现在我已经设法让您终于在我们的第一个想法中找到了解决方案，然后，我将解释您拥有的其他可能的解决方案以及我学到的关于选择的所有内容：

• 如果您不向选择添加大小属性，您将无法在它打开时检测到按键。

• 如果您在选择中添加大于 1 的 size 属性，它会检测到按键，但会丢失它的格式并出现一个列表。

• 如果您尝试使用偏移量，类似的，检查选择是否打开，也不起作用，因为选项对象没有偏移量 函数...（它们不是通常的 DOM 对象）

• 单击/聚焦也不够，因为在“ESC”单击后焦点仍处于选择状态。

然后，在审查了所有这些内容之后，我认为如果不像之前回答的那样做很多点击/模糊控制，就不可能以纯 HTML 方式制作它。

无论如何，澄清一下，有很多 jquery librarys 可以帮助您模拟选择/选项下拉菜单，并控制它是否打开。

我希望这个答案能解决您的问题。检查我为您准备的这个功能小提琴，以显示 jquery 下拉方式：

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

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

这些是我为理解它而阅读的文档：

• jQuery keypress/keyup/etc events not fired when select box is expanded

• How to detect escape key press with JavaScript or jQuery?

• jQuery Event Keypress: Enter key

• Keypress event on chosen single select

Answer 4

您可以尝试监听点击、模糊和按键事件。我只是在每个事件中将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>

Answer 5

我建议您使用提供选择菜单打开事件的新 jquery selectmenu

$("#myselect").selectmenu({
  open: function(event, ui) {
    alert("opened");
  }
});

label {
  display: block;
}
select {
  width: 200px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<select id="myselect">
  <option selected>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
</select>

参考：http://api.jqueryui.com/selectmenu/#event-open

Answer 6

jquery 为 1.6+ 时如何简单检查

  if ($(".selector").is(":focus")){
      // do stuff
  }

或

$(".selector").on('focus', function() {
    // do stuff
});

它可以解决问题。