¿Cómo se puede indicar mediante programación a un SELECT HTML que se despliegue (por ejemplo, debido al mouseover)?

¿Cómo se puede indicar mediante programación a un HTML selectque se despliegue (por ejemplo, debido al desplazamiento del mouse)?

No puede hacer esto con una etiqueta de selección HTML, pero puede hacerlo con JavaScript y HTML. Hay una variedad de controles existentes que hacen esto, por ejemplo, la lista de "sugerencias" adjunta a la entrada SO "etiqueta interesante / ignorada", o la búsqueda de direcciones de correo electrónico de Gmail.

Hay muchos controles JavaScript + HTML que proporcionan esta capacidad; busque controles de autocompletar para obtener ideas.

Vea este enlace para el control de Autocompletar ... http://ajaxcontroltoolkit.codeplex.com/

Esto solía ser posible con HTML + Javascript, a pesar de que en todas partes la gente dice que no lo es, pero quedó obsoleto más tarde y no funciona ahora.

Sin embargo, esto solo funcionó en Chrome. Lea más si está interesado.

De acuerdo con el Borrador de trabajo del W3C para HTML5, Sección 3.2.5.1.7. Contenido interactivo :

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

Cuando el usuario activa un elemento con un comportamiento de activación definido de una manera distinta a hacer clic en él, la acción predeterminada del evento de interacción debe ser ejecutar pasos sintéticos de activación de clic en el elemento.

<select>al ser un contenido interactivo, creí que es posible mostrar programáticamente sus <option>s. Después de unas horas de jugar, descubrí que usar document.createEvent()y .dispatchEvent()funciona.

Dicho esto, tiempo de demostración. Aquí hay un violín que funciona.

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, no dude en modificar este violín .

La respuesta de Xavier Ho cubre cómo resolver el problema en la mayoría de los navegadores que existen actualmente. Pero, es una buena práctica 'no enviar / modificar' eventos por JavaScript . (Como, mousedownen este caso)

A partir de la versión 53+, Google Chrome no realizará la acción predeterminada para eventos no confiables . Como eventos creados o modificados por script o enviados a través de un dispatchEventmétodo. Este cambio es para alinearse con Firefox e IE, que creo que ya no están realizando la acción.

Para fines de prueba, Fiddle proporcionó la respuesta de Xavier no funcionará en Chrome 53+. (No lo pruebo FF e IE).

Enlaces de referencia:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

Y initMouseEvent también está en desuso

Esto es lo más cerca que pude conseguir, cambiar el tamaño del elemento onmouseover y restaurar el tamaño onmouseout:

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

Tengo este mismo problema y la forma más fácil que encontré para solucionar esto fue con html y css.

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

Creo que esto ya no es posible en Chrome.

Parece que la versión 53 de Chrome deshabilita esta funcionalidad según lo declarado por Asim K T.

Según la especificación http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Los eventos de confianza no deben activar la acción predeterminada (excepto el evento de clic).

Sin embargo, lo han habilitado en la vista web, pero no lo he probado.

Hemos descubierto que algunas vistas web utilizan fastclick dentro de ellas y, debido al riesgo de rotura, vamos a permitir el mousedown en selecciones incluso si no son de confianza.

Y en esta discusión se abandona la idea de permitir que los desarrolladores abran un menú desplegable programáticamente.

Si alguien todavía está buscando esto:

<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" >Show dropdown items</button>

Javascript:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

Actualizar:

Uno hasta que no haya una solución perfecta para este problema, pero puede intentar evitar este escenario. ¿Por qué quieres hacer esto? Hace unos meses me preguntaba por una solución para crear un complemento selecto para dispositivos móviles

https://github.com/HemantNegi/jquery.sumoselect

Finalmente terminó enmascarando el div personalizado (o cualquier otro elemento) con un elemento de selección transparente, para que pueda interactuar directamente con el usuario.

Esta es la mejor forma 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-Flecha abajo 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>

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

Utilice esta función de expansión JS creada por un chico.

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

Incluya este JS y simplemente llámelo pasando el parámetro como su ID de selección, así:

ExpandSelect(MySelect)

Puede que me equivoque, pero no creo que sea posible con el cuadro de selección predeterminado. Podría hacer algo con JS y CSS que logre el resultado deseado, pero no (que yo sepa) el SELECT de vainilla.

Es posible abrir una "selección de HTML" a través de algunas de las soluciones mencionadas en esta pregunta y otras similares. Sin embargo, una forma más limpia de hacer esto es agregar una biblioteca de selección a su proyecto como "select2" o "elegido". Por ejemplo, abrir un select2 mediante programación sería tan fácil como:

$('#target-select').select2('open');

Esto no es exactamente lo que pediste, pero me gusta esta solución por su simplicidad. En la mayoría de los casos en los que deseo iniciar un menú desplegable, es porque estoy validando que el usuario realmente hizo una selección. Cambio el tamaño del menú desplegable y lo enfoco, lo que resalta muy bien lo que han omitido:

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