HTML Select + limitar el número de opciones visibles

Question

Tengo el selecto muestra en el gráfico por un día Unir. Esto demuestra 20 días visibles y tiene 21 a 31 no es visible, pero que puede desplazarse hacia abajo a ellos. Debido a la disposición de la página, la selección aumenta en lugar de hacia abajo: se ve extraño.

Con esto en mente se puede prevenir el número de opciones seleccione visibles decir 10? Por ejemplo: muestre 01 a 10 y tenga 11 a 31 ocultos pero disponibles para selección.

se puede hacer esto?

THX

Answer 1

Agregar atributo size-<select>:

<select style=" width:100px;" size="2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

Answer 2

El comportamiento depende del navegador y no se le controlado por el autor. Puede usar el atributo size = 10 en el elemento, pero también cambia el menú a un listbox para que 10 opciones estén visibles incluso cuando el menú no esté enfocado. Para lograr el comportamiento que describes, necesitarías construir tus propios controles usando JavaScript y CSS.

Desde el punto de vista de la facilidad de uso, una caja de entrada de texto suele ser preferible a un menú cuando un día de un mes se ha de escoger. Es más conveniente escribir uno o dos dígitos que seleccionar de una lista de aproximadamente 30 elementos.

Answer 3

En realidad no es un pequeño programa que puede lograr este extraño falta de posibilidad de elegir el número de elementos que se muestran en la etiqueta SELECT.

1 -

Digamos que queremos un SELECT mostrar un número máximo de 10 elementos. Adición de los siguientes eventos js a su etiqueta SELECT va a lograr este objetivo:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();' 

Esta manera de engañar al SELECT dándole el efecto deseado convertirlo a un SELECT tamaño.

2 -

Digamos que en cierto momento hay menos de un máximo de 10 artículos que desea mostrar.

Suponiendo que está recibiendo su SELECT de una consulta SQL que puede hacer algo como lo siguiente: Una vez que sepa el número de filas de su consulta tiene usted puede incluir la siguiente frase al bucle

if($nRow<10){ 
    $nRowSelect=$nRow+1; 
} 
else{ 
    $nRowSelect=10; 
} 

Así que si hay menos de 10 filas en cada ciclo, asigna la cantidad deseada de filas que se mostrarán.

onfocus='this.size=$nRowSelect;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();' 

3 -

comportamiento Buggy elementos de desplazamiento. Desde este hack reemplaza un SELECT común con un ‘tamaño’ uno que toma el espacio que necesita desplazar el contenido, no como un SELECT común que se solapa con el contenido por debajo de ella. Para evitar que esto suceda si el SELECT se va a colocar digamos en una etiqueta TD primero puede colocarlo en un DIV con el siguiente estilo:

position:absolute; 
z-index:1; 

Esto permitirá que el solapamiento SELECT tamaño el contenido a continuación es como si fuera un SELECTO común.