Javascript для определения видимости выпадающего элемента - PullRequest
Новая
       8

Javascript для определения видимости выпадающего элемента

5 голосов
/ 26 сентября 2008

У меня есть элемент select в форме, и я хочу отображать что-то, только если выпадающий список не отображается. Вещи, которые я пробовал:

  • Отслеживание событий кликов, где нечетные щелчки означают, что раскрывающийся список виден, а четные щелчки означают, что раскрывающийся список не отображается Пропускает другие способы исчезновения выпадающего меню (нажатие клавиши escape, переход в другое окно), и я думаю, что это может быть трудно получить правильный кросс-браузер.
  • Изменить события, но они срабатывают только при изменении значения поля выбора.

Идеи

Ответы [ 7 ]

4 голосов
/ 11 июля 2009

вот как я бы предпочел это сделать. фокус и размытие - это то, где оно находится. 

<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>
2 голосов
/ 01 июля 2009

Условный контент, о котором вы спрашиваете, не так уж и сложен. В следующем примере я буду использовать 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>

Мы свяжем пару событий, чтобы показать / скрыть #myDiv на основе выбранного значения # theSelectId 

$("#theSelectId").change(function(){
  if ($(this).val() != "dogs")
    $("#myDiv").fadeOut();
  else
    $("#myDiv").fadeIn();
});
0 голосов
/ 27 сентября 2008

Этот элементарный пример демонстрирует, как это сделать с помощью 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>
0 голосов
/ 27 сентября 2008

В jQuery, чтобы проверить, что-то видно: 

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

Это вернет что-то вроде 'block', 'inline' или 'none' (если элемент не отображается). Это просто представление CSS атрибута display.

0 голосов
/ 26 сентября 2008

Отслеживание состояния с использованием JavaScript-переменной. Мы назовем это «openX».

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

0 голосов
/ 26 сентября 2008

Я не думаю, что есть прямая поддержка. Вы также можете сидеть на кнопке выбора - он вызывается, когда выбор теряет фокус.

В зависимости от того, насколько это важно, вы можете попробовать реализовать свой собственный элемент управления или начать с того, который похож на элемент управления в раскрывающемся меню. Обычно, если это не критично для вашего приложения, делать это не стоит. Если вы решите пойти по этому пути, вот обсуждение того, кто пытается это сделать, используя в качестве основы dojo:

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

0 голосов
/ 26 сентября 2008

Мой первый вопрос - почему вы пытаетесь это сделать? Я не могу вспомнить ни одного приложения, которое демонстрирует такое поведение, и я не могу придумать вескую причину для такой ситуации.

Я не говорю, что у вас нет веских причин, но я просто не знаю, что это может быть:).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...