检查select是否显示选项
我有以下HTML代码：
<select>
<option selected>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
如何检查<select>的<option>是否显示？例如，这被认为是因为显示了<select>的<option>：
并且这被认为不显示<select>的<option>：
我已经尝试过了：
$("#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>
但是控制台日志一直在“显示”。
那么我如何才能做到这一点呢？
EDIT 1:
How to check if an select element is still “open” / active with jquery中的答案不起作用，因为当我单击select元素以显示选项，然后再次单击它时，即使select仍然处于焦点状态，选项也不会显示。
EDIT 2:
为了防止我的说明不够明确，基本上我希望控制台记录用户在select或option上单击的“已显示”或“未显示”
回答 6
Stack Overflow用户
发布于 2015-06-09 19:05:52
您可以尝试在单击、模糊和按键事件上收听。我只是在每个事件上将一个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>
Stack Overflow用户
发布于 2015-06-09 18:36:03
对于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>
Stack Overflow用户
发布于 2015-06-09 18:44:04
在阅读之后，我意识到选项标签并不是“普通”的DOM元素。然后，控制它就不那么容易了(相反，你可以像我们之前开始尝试的那样，检查单击、模糊和组合其他方法)。
现在我已经设法让你在我们最初的想法中找到了解决方案，然后，我将只解释你拥有的其他可能的解决方案，以及我学到的关于选择的所有事情：
- 如果您没有向select添加大小属性，您将无法在其打开时检测到按键。
- 如果您将大于1的size属性添加到select，它将检测到按键，但会丢失其格式并显示一个列表。
- 如果您尝试使用offset和类似方法来检查select是否打开，也不起作用，因为选项对象没有偏移功能...(它们不是常用的- DOM objects)
- Click/focus也不够，因为在单击"ESC“之后焦点仍保持在select中。
然后，在回顾了所有这些事情之后，我认为如果不像以前那样做很多点击/模糊控制，就不可能以纯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>
这些是我为了理解它而阅读的文档：
https://stackoverflow.com/questions/30729501
复制相似问题