Question

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

观看点击事件，其中奇数点击意味着下拉列表可见，甚至点击意味着下拉列表不可见。错过了下拉列表可能消失的其他方式（按下转义，跳转到另一个窗口），我认为这可能很难跨浏览器。
更改事件，但仅在选择框的值更改时触发这些事件。

想法？

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上 - 当选择失去焦点时它会被调用。

根据它的重要程度，您可以尝试实现自己的控件，或者从类似下拉菜单控件的控件开始。通常，除非它对您的应用程序至关重要，否则不值得这样做。如果您决定采用这条路线，这里讨论的是某人尝试使用dojo作为基础：

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

Answer 5

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

onfocus =“openX = true”onblur =“openX = false”onchange =“openX = false”

Answer 6

在jQuery中，测试某些内容是否可见：

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

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

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>

用于检测select元素的下拉列表是否可见的Javascript

7 个答案: