CODEWITHSUNDEEP
javascripthtmlhtml-select
stechz
stechz

Reputation: 426

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

I have a select element in a form, and I want to display something only if the dropdown is not visible. Things I have tried:

Ideas?

Upvotes: 6

Views: 12746

Answers (6)

Your Friend Ken
Your Friend Ken

Reputation: 8872

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>

Upvotes: 4

Sampson
Sampson

Reputation: 268344

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();
});

Upvotes: 2

user4903
user4903

Reputation:

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

Upvotes: 0

Nick Sergeant
Nick Sergeant

Reputation: 38123

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.

Upvotes: -1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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

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

Upvotes: -1

Lou Franco
Lou Franco

Reputation: 89152

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

Upvotes: 0

Related Questions