desencadenar un selecto elemento de formulario para mostrar sus opciones (abrir la lista desplegable de opciones) con Javascript

Question

Aquí está el marcado

<select id="person_prefix" name="prefix"> 
<option value=""></option> 
<option value="Dr" selected="selected">Dr</option> 
<option value="Mr">Mr</option> 
<option value="Ms">Ms</option> 
<option value="Mrs">Mrs</option> 
</select> 

y quiero para desencadenar un evento Javascript a fin de que la lista de opciones se despliega. Usando jquery he intentado lo siguiente:

$("#person_prefix").click(); 
$("#person_prefix").mousedown(); 
$("#person_prefix").change(); 

pero nada parece funcionar. ¿Qué evento es este y cómo se puede activar?

Gracias

Answer 1

No se puede hacer esto mediante programación multi-navegador. Puede reemplazar el menú desplegable con una solución completamente personalizada no realmente mostrando un elemento <select> ... pero no se puede mostrar mediante programación, especialmente en IE.

El más cercano que puede hacer es mover al usuario el elemento a través de .focus():

$("#person_prefix").focus(); 

Este con un poco de estilo CSS para cuando está enfocada (:focus) suele ser una muy buena manera de llamar la atención eso.

Answer 2

Si configura el atributo tamaño, la selección mostrará la cantidad de opciones que especifique en tamaño.

var sel= document.getElementsByName('select_1')[0]; 
var len= '10'// or sel.options.length; 
// safest: var len=sel.getElementsByTagName('*').length; 
sel.setAttribute('size',len) 

Al volver a establecer el tamaño en '1', se produce un colapso en la selección.

Answer 3

Usted no puede gatillo evento click en elemento select de la forma, pero la solución adecuada es este plugin:
jQuery.customSelect

La gran ventaja es que se pone en marcha el elemento real select (en realidad se hace clic en un invisible select - opacity: 0), que es importante en los dispositivos móviles (por ejemplo, iPhone tiene su propio diseño para mostrar las opciones select's).

Si no desea descargar todo el complemento, puede preparar la solución por su cuenta, ya que sabe cómo activar el select (ocultarlo estableciendo opacity: 0 - aún se podrá hacer clic).

Answer 4

sobre la base @ respuesta de Kennebec, una versión de jQuery para obtener un recuento de las opciones y optgroups:

var sel = $('select.mySelectClass'); 
var count=0; 

sel.find('option').each(function() { 

    count++; 
}); 

sel.find('optgroups').each(function() { 

    count++; 
}); 

sel.attr('size',count); 

Answer 5

Una vez estaba buscando la manera de hacer lo mismo y no encontró ninguna solución de trabajo, pero luego un tipo en nuestro grupo javascript vino con un trabajo inteligente. Aquí está el código.

HTML

<input type="button" id="show" value="show" /> 
<select id="myslect"> 
    <option>nothing</option> 
    <option>something</option> 
    <option>anything</option> 
</select> 

Javascript

$("#show").click(function() { 
    var element = $("select")[0], 
     worked = false; 
    if(document.createEvent) { // chrome and safari 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     worked = element.dispatchEvent(e); 
    } 
    if(!worked) { // unknown browser/error 
     alert("It didn't worked in your browser."); 
    } 
}); 

No estoy seguro de cómo un enlace al post grupo para que pueda ver todo el hilo. De todos modos créditos a CJ Madolara. ¡Buen trabajo!

Actualización:Sólo funciona en Chrome y Safari