Saludos, bienvenido al foro
.
Se me ocurre el siguiente código para tu problema :
Código:
<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.
Código:
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.
Código:
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.
Código:
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.
Código:
if (ev=='click' || ev=='focus') {
_obj.size=5;
_objStatus=1;
} else {
_obj.size=0;
_objStatus=0;
}
Lo siguiente pues se sobreentiende ¿no?:
Código:
} 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.
Código:
<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
.