Javascript para detectar si el menú desplegable de un elemento seleccionado es visible

Tengo un elemento seleccionado en un formulario, y quiero mostrar algo solo si el menú desplegable no está visible. Cosas que he intentado:Javascript para detectar si el menú desplegable de un elemento seleccionado es visible

Buscando eventos de clics, donde los clics impares significan que el menú desplegable es visible e incluso los clics significan que el menú desplegable no lo está. Omite otras formas en que el menú desplegable podría desaparecer (presionando escape, tabbing a otra ventana), y creo que esto podría ser difícil de obtener en todos los navegadores.
Cambie los eventos, pero estos solo se activan cuando cambia el valor del cuadro de selección.

Ideas?

Fuente

2008-09-26 stechz

Mi primera pregunta es: ¿por qué estás tratando de hacer esto? No puedo pensar en ninguna aplicación que muestre este comportamiento y no puedo pensar en una buena razón para que ocurra esta situación.

No estoy diciendo que no tenga una buena razón, pero simplemente no sé lo que podría ser :).

Fuente

2008-09-26 19:41:36

Cuando lo leí, mi conjetura fue algo relacionado con los elementos de SELECT rotos de IE. Entonces me puse triste. – Shog9

No creo que haya soporte directo. También puedes sentarte en la onblur de la selección: se llama cuando la selección pierde el foco.

Dependiendo de su importancia, puede intentar implementar su propio control o partiendo de uno similar a un control de menú desplegable similar. Por lo general, a menos que sea crítico para su aplicación, no vale la pena hacerlo. Si decide seguir este camino, he aquí una discusión de alguien que intenta hacerlo utilizando dojo como base:

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

Fuente

2008-09-26 19:48:17

un seguimiento del estado usando un varialbe JavaScript. Lo llamaremos "openX".

onfocus = "openx = true" onblur = "openx = false" onchange = "openx = false"

Fuente

2008-09-26 19:49:04

En jQuery, para probar si algo es visible:

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

Esto devolverá algo como 'bloque', 'en línea' o 'ninguno' (si el elemento no se muestra). Esto es simplemente una representación del atributo CSS 'mostrar'.

Fuente

2008-09-26 22:07:40

Puede hacerlo más breve con '$ element.is (': visible')' – alex

Este ejemplo rudimentario demuestra cómo hacerlo con setInterval. Comprueba una vez por segundo el estado de visualización de su menú de selección, y luego oculta o muestra un contenido. Funciona de acuerdo con la descripción de su problema, y no importa lo que oculte el menú de selección, mostrará ese contenido en consecuencia. En otras palabras, toggleDisplay() se configuró solo para demostrar eso.

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

Fuente

2008-09-26 23:34:18

Contenido condicional, que es lo que está preguntando, no es tan difícil. El en el siguiente ejemplo, voy a utilizar jQuery para lograr nuestro objetivo:

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

Ataremos un par de eventos para mostrar/ocultar #myDiv basado en el valor seleccionado de #theSelectId

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

Fuente

2009-07-01 19:42:17 Sampson

aquí es cómo preferiría hacerlo. enfoque y desenfoque es donde está.

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

Fuente

2009-07-11 01:27:37

Esto funcionará correctamente tanto para usuarios de mouse como para usuarios de solo teclado. – PetersenDidIt

Javascript para detectar si el menú desplegable de un elemento seleccionado es visible

Respuesta

Cuestiones relacionadas