ansaurus

Question

Javascript to detect whether the dropdown of a select element is visible

Answer 1

A:

My first question is - why are you trying to do this? I can't think of any application that exhibits this behavior and I can't think of a good reason for this situation to happen.

I'm not saying you don't have a good reason, but I just don't know what that might be :).

17 of 26 2008-09-26 19:41:36

When i read it, my guess was something involving IE's broken SELECT elements. Then i got sad.

Shog9 2008-09-26 19:45:10

Answer 2

A:

I don't think there's direct support. You could also sit on the onblur of the select -- it gets called when the select loses focus.

Depending on how important it is, you could try implementing your own control or starting from one like a drop-down menu control which is similar. Usually, unless it's critical to your application, it's not worth doing this. If you decide to go this route, here's a discussion of someone trying to do it using dojo as a basis:

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

Lou Franco 2008-09-26 19:48:17

Answer 3

A:

Keep track of the state using a JavaScript varialbe. We'll call it "openX".

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

Diodeus 2008-09-26 19:49:04

Answer 4

A:

In jQuery, to test if something is visible:

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

This will return something like 'block', 'inline', or 'none' (if element is not displayed). This is simply a representation of the CSS 'display' attribute.

Nick Sergeant 2008-09-26 22:07:40

You can make it more succinct with `$element.is(':visible')`

alex 2010-07-09 05:56:13

Answer 5

A:

This rudimentary example demonstrates how to do it with setInterval. It checks once every second for the display state of your select menu, and then hides or shows a piece of content. It works according to the description of your problem, and no matter what hides the select menu, it will display that piece of content accordingly. In other words, the toggleDisplay() was setup just to demonstrate that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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>

hal10001 2008-09-26 23:34:18

Answer 6

+2 A:

Conditional-content, which is what you're asking about, isn't that difficult. The in the following example, I'll use jQuery to accomplish our goal:

<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>

We'll tie a couple events to show/hide #myDiv based upon the selected value of #theSelectId

$("#theSelectId").change(function(){
  if ($(this).val() != "dogs")
    $("#myDiv").fadeOut();
  else
    $("#myDiv").fadeIn();
});

Jonathan Sampson 2009-07-01 19:42:17

Answer 7

+3 A:

here is how I would preferred to do it. focus and blur is where it is at.

<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>

x13 2009-07-11 01:27:37

This will work correctly for both mouse user and keyboard only users.

PetersenDidIt 2009-11-06 22:20:37

ansaurus

tags:

views:

answers:

Javascript to detect whether the dropdown of a select element is visible

related questions