Cambiar alto de lista desplegable

[WillianDs]

Hola todos, soy nuevo en este foro y nuevo en lo que es JavaScript XD

Asi que quisiera que me ayudaran en un problema que tengo con listas desplegables, y quisiera saber si se les puede cambiar el tamaño vertical a las listas desplegables ya que en un trabajo he hecho una lista que desplega los años desde 1907 a 1987 y cuando la desplego me abarca toda la pagina asi que desearia saber si hay una forma de que abarque menos tamaño y que funcione con el barra de desplazamiento vertical

Saludos

[D-MO]

Saludos, bienvenido al foro .

Se me ocurre el siguiente código para tu problema :

 
<script type="text/javascript" language="javascript">
    var _objStatus=0;
    function _select(_obj,ev){
        if(_objStatus==0){
            if (ev=='click' || ev=='focus') {
                _obj.size=5;
                _objStatus=1;
            } else {
                _obj.size=0;
                _objStatus=0;
            }
            
        } else {
            if(ev=='click' || ev=='blur'){
                _obj.size=0;
                _objStatus=0;
            } else {
                _obj.size=5;
                _objStatus=1;
            }
        }
        
        _obj.style.backgroundcolor='white';
    }
    
</script>


    <select id="foo" size="0" 
        onclick ="javascript:_select(this,'click');" 
        onfocus="javascript:_select(this,'focus');" 
        onchange="javascript:_select(this,'change');" 
        onblur="javascript:_select(this,'blur');"
    >
        <option>Opcion1</option>
        <option>Opcion2</option>
        <option>Opcion3</option>
        <option>Opcion4</option>
        <option>Opcion5</option>
        <option>Opcion6</option>
        <option>Opcion7</option>
        <option>Opcion8</option>
        <option>Opcion9</option>
        <option>Opcion10</option>
        <option>Opcion11</option>
        <option>Opcion12</option>
        <option>Opcion13</option>
        <option>Opcion14</option>
        <option>Opcion15</option>        
    </select>

Introduce todo el código que te coloco arriba dentro del body. La función del código es mas o menos la siguiente:
Inicializamos la variable _objStatus con el valor 0, lo cual significa que nuestro "select" está en el estado inicial.

    var _objStatus=0;

La función _select recibe como parametros el objeto (el select) y el evento (click,focus,blur,change), de los cuales depende la operación a realizar.

    function _select(_obj,ev){

Al ejecutar la función, debemos identificar el estado del select, si está desplegado o normal, esto lo hacemos evaluando el valor de la variable _objStatus, cuyos valores son: 0 = normal, 1+ = desplegado.

        if(_objStatus==0){

Si el estado del select es el inicial (0), entonces vamos a hacer otras evaluaciones para ver que es lo que debemos ejecutar. En el caso de que el evento sea que se le de un click al select o que este reciba el foco, vamos a cambiar la forma en la que este se ve, para ello cambiamos la propiedad "size" de nuestro select a 5 (cambiar por el numero de elementos que se deseen visualizar en el select) y el estado del objeto a 1. Pero, si el evento no fue ninguno de los antes mencionados, debió haber sido que el objeto perdió el foco, entonces tendrémos que volverlo a su estado normal y poner el estado a 0.

            if (ev=='click' || ev=='focus') {
                _obj.size=5;
                _objStatus=1;
            } else {
                _obj.size=0;
                _objStatus=0;
            }

Lo siguiente pues se sobreentiende ¿no?:

        } else {
            if(ev=='click' || ev=='blur'){
                _obj.size=0;
                _objStatus=0;
            } else {
                _obj.size=5;
                _objStatus=1;
            }
        }
    }

Y pues ahí están los parámetros que se pasarán a la función _select dependiendo del evento que se ejecute.

    <select id="foo" size="0" 
        onclick ="javascript:_select(this,'click');" 
        onfocus="javascript:_select(this,'focus');" 
        onchange="javascript:_select(this,'change');" 
        onblur="javascript:_select(this,'blur');"
    >
...       
    </select>

A esto le hace falta algunas cositas todavía, pero creo que así te sirve para empezar.

Saludos.

Edito:
Jeje, como sabran trabajo con Linux pero los demás pc's de la red tienen windows asì que decidí probarlo en IE y esto ha causado que todo el sistema se "trabe", revisaré mas tarde cual será el error en el código (o en el explorador ) para buscar una solución, pero al menos la idea ahí está.

Edito 2:
Tampoco funciona en Opero sobre Linux .

[WillianDs]

Muchas Gracias XD

Lo probare

[Mick]

Y digo yo, poque no poner directamente la propiedad size del select en el html , no en javascript, asi solo es una linea, e infinitamente mas sencillo ?????

[D-MO]

Empezado por Mick

Y digo yo, poque no poner directamente la propiedad size del select en el html , no en javascript, asi solo es una linea, e infinitamente mas sencillo ?????

En ese caso ya no sería una lista desplegable

Saludos.

[roman]

Pero si usas la propiedad size, entonces ya no se tiene una lista desplegable, sino sólo una lista. Parece que el ejemplo trata de simular eso aunque lo he probado y resulta un tanto confuso. En realidad no entiendo cuál es el problema; las listas desplegables tiene un máximo de elementos que mostrar a la vez, pasado el cual, muestran las barras de desplazamiento.

// Saludos

[WillianDs]

XD lo estuve probando y no me funciono se me queda trabado la pagina web XD, bueno en fin si me dan otra mano no me quejaria XD

Gracias por todo

[D-MO]

Empezado por roman

Pero si usas la propiedad size, entonces ya no se tiene una lista desplegable, sino sólo una lista.

Pues tienes razón en lo que dices, pero, lo que trato es de simular una lista desplegable que (al menos en firefox) funciona mas o menos como WillianDs lo pide.

Empezado por roman

Parece que el ejemplo trata de simular...

Eso es de lo que te digo.

Empezado por roman

...no he probado y resulta un tanto confuso...

Y si lo pruebas, pruebalo en firefox

En realidad no entiendo cuál es el problema; las listas desplegables tiene un máximo de elementos que mostrar a la vez, pasado el cual, muestran las barras de desplazamiento.

Pues si, y supongo que a WillianDs le muestra la barra de desplazamiento pero con una lista que sobrepasa el tamaño que el desea que tenga, sus razones tendrá. Yo simplemente tenía un tiempecito libre y una idea loca, al menos le dí una idea de por donde puede ir el asunto.

Empezado por saludos

// Saludos

Saludos...

Empezado por WillianDs

XD lo estuve probando y no me funciono se me queda trabado la pagina web XD, bueno en fin si me dan otra mano no me quejaria XD

Pruébalo con firefox, ya en mi primer respuesta aclaré que no funcionaba con IE ni con Opera, tan solo en Firefox.

Saludos.

[WillianDs]

O.o XD lo acabo de probar en Firefox y Funciono XD Gracias compadre realmente te pasastes

Ahora lo interesante sera ver como hago para que lo corra el IE. XD

Gracias

[roman]

Empezado por D-MO

Pues tienes razón en lo que dices, pero, lo que trato es de simular una lista desplegable que (al menos en firefox) funciona mas o menos como WillianDs lo pide.

El comentario iba para William

Empezado por D-MO

Eso es de lo que te digo.

El comentario iba para Mick

Empezado por D-MO

Y si lo pruebas, pruebalo en firefox

Me has citado mal. Yo dije lo he probado... Y también en FireFox. Ahí funciona mejor que en IE pero luego de unos clicks se vuelve confuso.

Empezado por D-MO

Yo simplemente tenía un tiempecito libre y una idea loca, al menos le dí una idea de por donde puede ir el asunto.

Disculpa si parecía una crítica gratuita a tu intervención, no era la intención. Es sólo que me parece raro el requerimiento original.

// Saludos

[D-MO]

Empezado por roman

Me has citado mal. Yo dije lo he probado... Y también en FireFox. Ahí funciona mejor que en IE pero luego de unos clicks se vuelve confuso.

Jeje, pues supongo que al citar omití la "l" y me inagine que era "n" perdona con la confusión.

Empezado por roman

Disculpa si parecía una crítica gratuita a tu intervención, no era la intención. Es sólo que me parece raro el requerimiento original.

No te preocupes, perdona tambien mi "tono" al responder, pero, he pasado muy atrasado ahorita y a veces paso muy tenso.

Saludos.