6

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

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

想法？

4

7 回答 7

4

这就是我希望这样做的方式。焦点和模糊就是它所在的位置。

<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>
于 2009-07-11T01:27:37.353 回答
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();
});
于 2009-07-01T19:42:17.920 回答
0

我的第一个问题是——你为什么要这么做？我想不出任何表现出这种行为的应用程序，我想不出发生这种情况的充分理由。

我并不是说你没有充分的理由，但我只是不知道那可能是什么:)。

于 2008-09-26T19:41:36.503 回答
0

我认为没有直接的支持。您也可以坐在Select的Onblur上 - 当Select Offoy focus时，它会被调用。

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

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

于 2008-09-26T19:48:17.613 回答
0

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

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

于 2008-09-26T19:49:04.630 回答
0

在 jQuery 中，测试是否可见：

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

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

于 2008-09-26T22:07:40.663 回答
0

这个基本示例演示了如何使用 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>
于 2008-09-26T23:34:18.053 回答