Question

我有以下HTML代码：

＆＃13;

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

＆＃13;

如何检查<option>的{{1}}是否显示？例如，这被视为显示<select>的{{1}}：

Options of the select menu are displayed

这被视为<option>的{{1}}未显示：

Options of the select menu are not displayed

我试过这个：

＆＃13;

<select>

＆＃13;

<option>

＆＃13;

但控制台记录＆＃34;显示＆＃34;一直以来。

那我怎么能实现这个目标呢？

编辑1：

How to check if an select element is still “open” / active with jquery的答案不起作用，因为当我点击<select>元素以显示选项然后再次点击它时，即使$("#myselect").on("click", function() { if ($("#myselect option").length == 0) { console.log("not displayed"); } else { console.log("displayed"); } });仍然是焦点，也不会显示选项

编辑2：

以防我不够明确，基本上我希望控制台能够记录＆＃34;显示＆＃34;或＆＃34;未显示＆＃34;用户点击了<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>或select

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

阅读后，我意识到Option标签不是“常用”DOM元素。然后，控制它并不是那么容易（相反，你正在检查点击，模糊，并结合我们之前开始尝试的其他方法）。

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

如果您没有为选择添加尺寸属性，则无法在打开时检测到按键。



如果你在select中添加一个大于1的size属性，它会检测到按键，但会丢失它的格式并显示一个列表。



如果你试图使用偏移量，类似的，检查选择是否打开，也不起作用，因为选项对象没有偏移量   函数...（它们不是usuarl 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>

这些是我理解的文件：

Answer 4

我建议你使用提供selectmenu开放事件的新jquery selectmenu

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 5

jquery为1.6+时的简单检查怎么样？

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

可以解决问题。

Answer 6

解决方案：

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

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

希望有所帮助。

检查select是否显示选项

6 个答案: