用于检测select元素的下拉列表是否可见的Javascript
我在表单中有一个select元素，并且我只想在下拉菜单不可见的情况下显示某些内容。我尝试过的事情：
- 监视点击事件，其中奇数点击表示下拉菜单可见，偶数点击表示下拉菜单不可见。错过了下拉菜单可能消失的其他方式(按Escape键，移至另一个窗口)，我认为这可能很难获得正确的跨浏览器。
- 更改事件，但仅在选择框的值更改时才触发。
有想法吗？
解决方案
我的第一个问题是我们为什么要尝试这样做？我无法想到任何表现出这种行为的应用程序，也无法想到这种情况发生的充分原因。
我并不是说我们没有充分的理由，但我只是不知道那可能是什么:)。
我认为没有直接的支持。我们也可以坐在select的onblur上-当select失去焦点时会被调用。
根据它的重要性，我们可以尝试实现自己的控件，也可以从类似的下拉菜单控件开始。通常，除非对应用程序至关重要，否则不值得这样做。如果我们决定走这条路，那么这里讨论的是某人尝试使用dojo作为基础：
http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select
使用JavaScript varialbe跟踪状态。我们将其称为" openX"。
onfocus =" openX = true" onblur =" openX = false" onchange =" openX = false"
在jQuery中，测试是否可见：
$('something').css('display')
这将返回" block"，" inline"或者" none"之类的内容(如果未显示元素)。这只是CSS"显示"属性的表示。
这个基本的示例演示了如何使用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>
我们所要询问的条件内容并不难。在以下示例中，我将使用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();
});
这是我更喜欢这样做的方式。
聚焦和模糊就在这里。
<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>
