Foros del Web » Programando para Internet » Javascript »

descripcion de un select

Estas en el tema de descripcion de un select en el foro de Javascript en Foros del Web. Hola a todos espero que sten bien tengo un duda esposible hacer un tipo de desripcion a un selt, me explico en el ejemplo de ...
  #1 (permalink)  
Antiguo 27/06/2003, 11:30
 
Fecha de Ingreso: agosto-2002
Mensajes: 301
Antigüedad: 21 años, 7 meses
Puntos: 2
descripcion de un select

Hola a todos espero que sten bien tengo un duda esposible hacer un tipo de desripcion a un selt, me explico en el ejemplo de mas abajao tengo un select cuyo contenido es super largo y no me sirve por eso le di un largo dterminado, el problema esta en que no se puede ller el contenido por eso pregunta si hay algo para que la posicionarme con el mouse encima de la opcionn apatrezca la opcion completa asi como los "title" gracias


<select name="OP" id="select3" style="width:110" >
<option >ADMINISTRACION DE COOPERATIVAS</option>
<option >ADMINISTRACION DE EJECUTIVOS DE PLATAFORMA</option>
<option>ABASTECIM. Y CONTROL DE EXISTENCIAS</option>
</select>

Última edición por KarlanKas; 30/06/2003 a las 00:14
  #2 (permalink)  
Antiguo 29/06/2003, 20:08
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Hola vito_gris :

Me costó un poco leer tu mensaje. Pero no entenderlo. Supongo que con ésto debe ser suficiente.

El select es uno de los elementos que se trae más problemas : por su especie de "posición relativa" con el z-index más alto del documento, porque no acepta title, porque tiene un botón que ignora la función click(), porque no interpreta algún que otro evento ...

Cuando me canso de pelear con él, termino reemplazándolo con otros métodos que, de preferencia, se le parezcan; ya que todos estamos acostumbrados a desplegar opciones y pincharlas, y cambiar de sistema sólo por hacer un diseño original no siempre es negocio.

Pero volviendo a tu pregunta, me surge una duda ¿para qué usas el select ?. Si es para dejar fijo un campo de formulario, no sirve de nada "reducirlo", porque se tiene que leer en alguna parte y eso ya te ocupa todo el ancho de la opción; pero si es para ir a otro formulario, documento o sitio quizá se pueda hacer algo.

Para comenzar, si propones darle tooltips ( title ) es porque el select no podrá ocupar más espacio, pero otros elementos sí pueden flotar sobre el documento ocultando una parte. Como mencioné más arriba, el title no sirve; pero se puede simular uno con capas.
Por otro lado, si puedes poner un mensaje en una capa, también puedes poner el select en una capa o en una ventana pop-up.
Una más sería cambiar el tamaño del select cuando no se lo va a usar, pero ésto depende mucho del diseño de tu página.

Código:
 
 <html> 
<head> 
<title> SELECT's.</title> 
<script language="javascript">

function Descrip(){
document.getElementById('dscr').style.display =  'none'}

</script>
</head> 
<body bgcolor=silver>

<h2>Reducir <tt>select</tt>.</h2>

<form name=frm>

<span onmouseout="setTimeout('Descrip()',3000)" 
style="font:12px sans-serif; position:absolute; width:65px">
<select style="font:12px sans-serif; width:40px" 
onmousedown="document.getElementById('dscr').style.display=
'inline'" onchange="Descrip()" onblur="Descrip()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><span id=dscr style="display:none; padding:0 5px; 
margin-left:40px; float:right; background:infobackground; 
border:1px solid infotext"> uno<br>dos<br>tres<br>cuatro<br>cinco
</span></span>

</form>

<p style=margin-top:60px>En el primer ejemplo de <i>tooltip</i> 
aparece junto al desplegable una descripción de cada ítem, que 
se borra en 3 segundos o cuando se cambia el valor 
seleccionado. Para ver nuevamente la descripción, se puede 
arrastrar el <i>mouse</i> sobre el desplegable y soltar el 
botón en la opción elegida.
<p>.<p>
<input type=button value=">" 
onclick="document.getElementById('opciones').style.display=  
'inline'">
<select id="opciones" style="display=none; position:relative; 
width:100px; margin-right:-100px" onblur="this.style.display='none'" 
onchange="this.style.display='none'" >
<option>1_UNO</option>
<option>2_DOS</option>
<option>3_TRES</option>
<option>4_CUATRO</option>
<option>5_CINCO</option>
</select> <b>Click para ver el <tt>select</tt> .</b>

<p>En el segundo ejemplo el <tt>select</tt> se despliega con un 
botón y se oculta con <tt>onchange</tt> o con <i>click</i> en 
cualquier lugar de la página.
<p>.<p>
<select onfocus="this.style.width=''" onblur="this.style.width='40px'" 
onchange="this.style.width='40px'" style="width:40px">
<option selected>1 _UNO</option>
<option>2 _DOS</option>
<option>3 _TRES</option>
<option>4 _CUATRO</option>
<option>5 _CINCO</option>
</select> 

<select onfocus="this.style.width=''" onblur="this.style.width='23px'" 
onchange="this.style.width='23px'" style="width:23px">
<option selected>1 _UNO</option>
<option>2 _DOS</option>
<option>3 _TRES</option>
<option>4 _CUATRO</option>
<option>5 _CINCO</option>
</select> 

<select onfocus="this.style.width=''" onblur="this.style.width='22px'" 
onchange="this.style.width='22px'" style="width:22px">
<option selected>1 _UNO</option>
<option>2 _DOS</option>
<option>3 _TRES</option>
<option>4 _CUATRO</option>
<option>5 _CINCO</option>
</select>

<p>
En los últimos ejemplos el <tt>select</tt> cambia de tamaño; 
aunque necesita varios <i>clicks</i> para mostrarse, ocultarse 
y cambiar de opción.

</body> 
</html>
Por último, éstas son todas soluciones desesperadas, todas tienen sus limitaciones y todas se deberán adaptar a tus necesidades. Espero que alguna te ayude.

Ah!; casi me olvido. Los probé solamente en IE 5.5.

Saludos

furoya

Todo sobre colores

Alt en un <select>

Última edición por furoya; 13/10/2005 a las 10:55 Razón: aparecen espacios en el código y al copiarlo no funciona
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:54.