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

后端未结

关注

 7  1000

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:

Watching for click events, where

相关标签:

7条回答

逝去的感伤

2020-12-19 08:56

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
长情又很酷

2020-12-19 08:59

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 :).

0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2020-12-19 09:01
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2020-12-19 09:06

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

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

温柔的废话

2020-12-19 09:08

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>

0 讨论(0)

终归单人心

2020-12-19 09:10

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

0 讨论(0)

1 2 下一页