validacion - validar formulario javascript html5

Cómo expandir automáticamente el elemento de selección html en javascript

Question

Tengo un objeto de selección html (oculto) en mi menú adjunto a un enlace de botón de menú, de modo que al hacer clic en el enlace se muestra la lista para que pueda elegir.

Cuando hace clic en el botón, llama a algunos javascript para mostrar <select> . Al hacer clic fuera de <select> oculta la lista. Lo que realmente quiero es hacer que la <select> aparezca completamente expandida, como si hubiera hecho clic en la flecha "hacia abajo", pero no puedo hacer que esto funcione. He intentado muchos enfoques diferentes, pero no puedo avanzar. Lo que estoy haciendo actualmente es esto:

<li>
<a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a>
<select id="list" style="display:none; onblur="javascript:cancellist()">
</select>
</li>
// in code
function showlist() {
//using prototype not jQuery
$(''list'').show(); // shows the select list
$(''list'').focus(); // sets focus so that when you click away it calles onblur()
}

• Intenté llamar a $(''list'').click() .
• Intenté configurar onfocus="this.click()" Pero en ambos casos me estoy poniendo

Unkeught TypeError: Object # no tiene ningún método ''click''

lo cual es peculiar ya que el texto del enlace dice que admite las funciones estándar.

He intentado configurar el .size = .length que funciona, pero no tiene la misma apariencia (como cuando haces clic para abrir el elemento, flota sobre el resto de la página).

¿Alguien tiene alguna sugerencia?

Answer 1

Usted tiene un error de sintaxis Debería ser:

$(''#list'').click();

Olvidaste el #

Answer 2

Me encontré con el mismo problema, quería implementar la navegación por teclado en mi aplicación, pero los elementos seleccionados no se expandieron, por lo que las personas que usaban el teclado iban a perder la funcionalidad. Creé la función ExpandSelect () que emula los clics del mouse en elementos seleccionados, lo hace creando otra <select> con múltiples opciones visibles a la vez configurando el atributo de size , el código está alojado en el sitio web de Google Code, ExpandSelect.js es solo 4 KB, mira capturas de pantalla y descárgalo aquí:

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

Capturas de pantalla

Hay una pequeña diferencia en la GUI al emular el clic, pero realmente no importa, véalo usted mismo:

Cuando el mouse hace clic:

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

Al emular, haga clic en:

EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

Más capturas de pantalla en el sitio web del proyecto, enlace arriba.

Answer 3

Por favor intente esto:

function showlist() {
//using prototype not jQuery
$(''#list'').show(); // shows the select list
$(''#list'').focus(); // sets focus so that when you click away it calles onblur()
}

Answer 4

Aquí una solución simple, menú de selección AUTO-AMPLIADO (todas las opciones visibles)

<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;">
<option selected="selected" value="0">defaulttt</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
<script type="text/javascript">
var slctt=document.getElementById("ddlTestSelect");
slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width=''470px'';
</script>

Answer 5

La forma más simple es usar el atributo "múltiple" en HTML

<select multiple></select>

y también podría agregar un atributo de estilo para establecer el alto de la lista

<select multiple style="height:150px;"></select>