Javascript检测选择元素的下拉菜单是否可见答案

【问题标题】：Javascript to detect whether the dropdown of a select element is visibleJavascript检测选择元素的下拉菜单是否可见
【发布时间】：2012-07-28 13:40:43
【问题描述】：

我在表单中有一个选择元素，我只想在下拉菜单不可见时才显示一些内容。我尝试过的事情：

观察点击事件，奇数点击意味着下拉菜单可见，偶数点击意味着下拉菜单不可见。错过了下拉菜单可能消失的其他方式（按退出键，切换到另一个窗口），我认为这可能很难跨浏览器正确。
更改事件，但这些事件仅在选择框的值更改时触发。

想法？

【问题讨论】：

标签： javascript html html-select

【解决方案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>

【讨论】：

这对于鼠标用户和仅键盘用户都可以正常工作。

【解决方案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();
});

【讨论】：

【解决方案3】：

我认为没有直接的支持。 You could also sit on the onblur of the select -- it gets called when the select loses focus.

根据它的重要性，您可以尝试实现自己的控件或从类似的下拉菜单控件开始。通常，除非它对您的应用程序至关重要，否则不值得这样做。如果你决定走这条路，下面是关于有人试图以道场为基础的讨论：

http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select

【讨论】：

【解决方案4】：

这个基本示例演示了如何使用 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>

【讨论】：

【解决方案5】：

使用 JavaScript 变量跟踪状态。我们称之为“openX”。

onfocus="openX=true" onblur="openX=false" onchange="openX=false"

【讨论】：

【解决方案6】：

在 jQuery 中，测试是否可见：

$('something').css('display')

这将返回类似“block”、“inline”或“none”的内容（如果未显示元素）。这只是 CSS 'display' 属性的一种表示。

【讨论】：

您可以使用$element.is(':visible')使其更简洁