¿Cómo se puede programar mediante programación un HTML SELECT para desplegar (por ejemplo, debido al mouseover)?

Question

¿Cómo se puede programar mediante programación un HTML select para desplegar (por ejemplo, debido al mouseover)?

Answer 1

He aquí la mejor manera que encontré. NOTA: solo funciona con IE en Windows y su web probablemente necesite estar en una zona segura, porque accedemos al shell. El truco es que ALT-Down Arrow es una tecla de método abreviado para abrir un menú desplegable de selección.

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button> 
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9"> 
    <option>ABC</option> 
    <option>DEF</option> 
    <option>GHI</option> 
    <option>JKL</option> 
</select> 
<script type="text/javascript"> 
    function doClick() { 
     optionsSelect.focus(); 
     var WshShell = new ActiveXObject("WScript.Shell"); 
     WshShell.SendKeys("%{DOWN}"); 
    } 
</script> 

Answer 2

Esto no es exactamente lo que pidieron, pero me gusta esta solución por su sencillez. En la mayoría de los casos en los que deseo iniciar un menú desplegable, es porque estoy validando que el usuario ha hecho una selección. Puedo cambiar el tamaño de la lista desplegable y enfocarla, que destaca muy bien lo que han omitidos:

$('#cboSomething')[0].size = 3; 
$('#cboSomething')[0].focus(); 

Answer 3

Esto es realmente posible con HTML + Javascript, a pesar de todos los demás sitios la gente dice que no lo es.

Sin embargo, esto solo funciona en Chrome. Lee más si estás interesado.

---

Según W3C Working Draft for HTML5, Section 3.2.5.1.7. Interactive Content:

Ciertos elementos en HTML tienen un comportamiento de activación, lo que significa que el usuario puede activar ellos. Esto desencadena una secuencia de eventos que depende del mecanismo de activación , por ejemplo, mediante el teclado o la entrada de voz, o mediante clics del mouse.

Cuando el usuario desencadena un elemento con un comportamiento de activación definido distinto de hacer clic en él, la acción predeterminada del evento de interacción debe ser ejecutar pasos de activación de clic sintético en el elemento.

<select> ser un contenido interactivo, que cree que es posible visualizar programáticamente sus <option> s.Después de algunas horas de jugar, descubrí que el uso de document.createEvent() y .dispatchEvent() funciona.

Dicho esto, demo time. Here is a working Fiddle.

---

HTML:

<select id="dropdown"> 
    <option value="Red">Red</option> 
    <option value="Green">Green</option> 
    <option value="Blue">Blue</option> 
</select> 
<br> 
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​ 

Javascript:

// <select> element displays its options on mousedown, not click. 
showDropdown = function (element) { 
    var event; 
    event = document.createEvent('MouseEvents'); 
    event.initMouseEvent('mousedown', true, true, window); 
    element.dispatchEvent(event); 
}; 

// This isn't magic. 
window.runThis = function() { 
    var dropdown = document.getElementById('dropdown'); 
    showDropdown(dropdown); 
}; 

Si alguien encuentra una manera de hacer lo mismo, pero no en Chrome, please feel free to modify this fiddle.

Answer 4

Deja de pensar que una cosa es imposible, nada es imposible de hacer, cuando quieras.

Utilice esta función expandir JS creada por un hombre.

http://code.google.com/p/expandselect/

Incluir este JS y simplemente llamar la que pasa el parámetro como su SELECT ID, así:

ExpandSelect(MySelect)