我有一个形式的选择元素，我想显示的东西只有在下拉列表是不可见的。 事情我已经尝试：
- 看着click事件，其中奇数指点击下拉是可见的，甚至点击意味着下拉不是。 错过其他方面的下拉可能消失（按逃生，跳格到另一个窗口），我认为这可能是很难得到正确的跨浏览器。
- 变更事件，但这些只被触发时，选择框的值发生变化。
想法？
Answer 1:
这里是我会怎么首选做到这一点。 聚焦和模糊是它是。
<html>
<head>
<title>SandBox</title>
</head>
<body>
<select id="ddlBox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div id="divMsg">some text or whatever goes here.</div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
var ddlBox = document.getElementById("ddlBox");
var divMsg = document.getElementById("divMsg");
if (ddlBox && divMsg) {
ddlBox.onfocus = function() {
divMsg.style.display = "none";
}
ddlBox.onblur = function() {
divMsg.style.display = "";
}
divMsg.style.display = "";
}
}
</script>
Answer 2:
有条件的内容，这是你问什么，并不难。 在下面的例子中，我将使用jQuery的实现我们的目标：
<select id="theSelectId">
<option value="dogs">Dogs</option>
<option value="birds">Birds</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
</select>
<div id="myDiv" style="width:300px;height:100px;background:#cc0000"></div>
我们将配合一对夫妇的事件，显示基于#theSelectId的设定值/隐藏#myDiv
$("#theSelectId").change(function(){
if ($(this).val() != "dogs")
$("#myDiv").fadeOut();
else
$("#myDiv").fadeIn();
});
Answer 3:
我的第一个问题是 - 为什么你想这样做吗？ 我不认为出现此行为的任何应用程序的，我不能想到一个很好的理由，这种情况发生。
我不是说你没有一个很好的理由，但我只是不知道什么是可能:)。
Answer 4:
我不认为有直接的支持。 你也可以坐在选择的的onblur - 当选择失去焦点它被调用。
这取决于它是多么的重要，你可以尝试实现自己的控制，或从一个像一个下拉菜单控制它类似于开始。 通常情况下，除非是你的应用非常关键，这是不值得这样做。 如果你决定走这条路线，这里的人试图做道场使用为基础的它的讨论：
http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select
Answer 5:
跟踪使用JavaScript varialbe状态。 我们将其称为“OpenX的”。
的onfocus = “OpenX的=真” 的onblur = “OpenX的=假” 的onchange = “OpenX的=假”
Answer 6:
在jQuery中，以测试，如果事情是可见的：
$('something').css('display')
这将返回类似“块”，“内联”，或“无”（如果未显示元素）。 这是一个简单的CSS“显示器”属性的表示。
Answer 7:
这个基本的例子演示了如何在使用setInterval做到这一点。 它检查每秒一次为您的选择菜单的显示状态，然后隐藏或显示的内容片段。 它根据您的问题的描述的作品，不管是什么隐藏的选择菜单，将相应地显示该内容片段。 换句话说，在toggleDisplay（）是设置只是为了证明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script language="javascript" type="text/javascript">
var STECHZ = {
init : function() {
STECHZ.setDisplayedInterval();
},
setDisplayedInterval : function() {
STECHZ.isDisplayedInterval = window.setInterval(function(){
if ( document.getElementById( "mySelectMenu" ).style.display == "none" ) {
document.getElementById( "myObjectToShow" ).style.display = "block";
} else {
document.getElementById( "myObjectToShow" ).style.display = "none";
}
}, 1000);
},
isDisplayedInterval : null,
toggleDisplay : function() {
var mySelectMenu = document.getElementById( "mySelectMenu" );
if ( mySelectMenu.style.display == "none" ) {
mySelectMenu.style.display = "block";
} else {
mySelectMenu.style.display = "none";
}
}
};
window.onload = function(){
STECHZ.init();
}
</script>
</head>
<body>
<p>
<a href="#" onclick="STECHZ.toggleDisplay();return false;">Click to toggle display.</a>
</p>
<select id="mySelectMenu">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div id="myObjectToShow" style="display: none;">Only show when mySelectMenu is not showing.</div>
</body>
</html>
文章来源: Javascript to detect whether the dropdown of a select element is visible
