Javascript для определения видимости раскрывающегося списка элемента выбора
У меня есть элемент выбора в форме, и я хочу отображать что-то только в том случае, если раскрывающийся список не отображается. Вещи, которые я пробовал:
- Наблюдение за событиями кликов, где нечетные щелчки означают, что раскрывающийся список виден, а даже щелчки означают, что раскрывающийся список не отображается. Пропускает другие способы исчезновения раскрывающегося списка (нажатие клавиши escape, переход к другому окну), и я думаю, что это может быть сложно получить правильный кроссбраузер.
- Изменить события, но они запускаются только при изменении значения поля выбора.
Идеи?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Мой первый вопрос - почему вы пытаетесь это сделать? Я не могу придумать ни одного приложения, которое демонстрирует такое поведение, и не могу придумать вескую причину, по которой такая ситуация может произойти.
Я не говорю, что у вас нет веской причины, но я просто не знаю, что это может быть :).
Не думаю, что есть прямая поддержка. Вы также можете сесть на размытие выделения - оно вызывается, когда выделение теряет фокус.
В зависимости от того, насколько это важно, вы можете попробовать реализовать свой собственный элемент управления или начать с аналогичного элемента управления в раскрывающемся меню. Обычно, если это не критично для вашего приложения, этого делать не стоит. Если вы решите пойти по этому пути, вот обсуждение того, кто пытается сделать это, используя додзё в качестве основы:
http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select
Следите за состоянием с помощью переменной JavaScript. Назовем его «openX».
onfocus = "openX = true" onblur = "openX = false" onchange = "openX = false"
В jQuery, чтобы проверить, видно ли что-нибудь:
$('something').css('display')
Это вернет что-то вроде «block», «inline» или «none» (если элемент не отображается). Это просто представление атрибута «display» CSS.
Вы можете сделать его более лаконичным с $element.is(':visible')
Этот элементарный пример демонстрирует, как это сделать с помощью 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>
Условное содержание, о котором вы спрашиваете, не так уж и сложно. В следующем примере я буду использовать 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();
});
вот как я бы предпочел это сделать. фокус и размытие - вот где это.
<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>
Это будет правильно работать как для пользователей мыши, так и для пользователей, использующих только клавиатуру.
Когда я прочитал его, я предположил, что что-то связано с неработающими элементами SELECT IE. Потом мне стало грустно.