Foros del Web » Creando para Internet » HTML »

OPCIONES DE UN "SELECT" CON SCROLL

Estas en el tema de OPCIONES DE UN "SELECT" CON SCROLL en el foro de HTML en Foros del Web. Hola a todos y muchas gracias de antemano por ayudarme. Estoy empezando en esto de programar en HTML y cuando hago un formulario que contiene ...
  #1 (permalink)  
Antiguo 20/08/2004, 06:16
 
Fecha de Ingreso: diciembre-2003
Mensajes: 15
Antigüedad: 14 años
Puntos: 0
OPCIONES DE UN "SELECT" CON SCROLL

Hola a todos y muchas gracias de antemano por ayudarme.

Estoy empezando en esto de programar en HTML y cuando hago un formulario que contiene un SELECT y lo despliego se salen las 10 opciones que tengo. Es posible que unicamente me muestre 5 y para acceder al resto utilize una barra de desplazamiento vertical.

Vamos la idea es poner una barra de desplazamieno vertical al SELECT del formulario.

Otra cosa, la anchura del SELECT, se ajusta a la anchura de la OPTION mas grande, es posible tambien determinar la anchura del SELECT.
Lo pregunto porque tengo una columna de una tabla con SELECTS con diferentes OPTIONS y unos son mas anchos que otros y no queda muy bien esteticamente.

Gracias y un saludo.
  #2 (permalink)  
Antiguo 20/08/2004, 07:02
 
Fecha de Ingreso: julio-2004
Mensajes: 38
Antigüedad: 13 años, 5 meses
Puntos: 0
<select style="width:350;" ...>

Con eso le marcas el ancho a la select.
  #3 (permalink)  
Antiguo 20/08/2004, 13:30
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola clandernet , carlorio_150 :

Quizá sirva ésto

como colocar un scroll horizontal en un select

saludos

furoya
  #4 (permalink)  
Antiguo 20/08/2004, 14:10
Avatar de La2daElegida  
Fecha de Ingreso: noviembre-2003
Ubicación: Argentina
Mensajes: 1.893
Antigüedad: 14 años
Puntos: 4
<select name="select" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>

Con size le das el total de filas que queres mostrar.
__________________
Juegos online . Juegos gratis
  #5 (permalink)  
Antiguo 23/08/2004, 04:06
 
Fecha de Ingreso: diciembre-2003
Mensajes: 15
Antigüedad: 14 años
Puntos: 0
Gracias a todos por contestar...

Lo de la anchura ya lo he solucionado con el "style", pero lo de la barra de desplazamiento vertical no es exactamento lo que yo buskaba..

Yo tengo un SELECT donde unicamente se muestra la opcion seleccionada, y cuando le das a la flecha de la derecha y se despliegan todo el resto de opciones posibles del SELECT, pues esa lista es la que tenga la barra de desplazamiento vertival. Imaginemos que tengo una lista de opciones de 40, yo no quiero que se muestren las 40 opciones, sino que se muestren 10 y para acceder al resto tengamos que movernos con la barra de desplazamiento vertical. Pero inicialmente unicamente tengo una fila con la opcion seleccionada.. y unicamente pulsando el boton derecho es cuando se muestran el resto de opciones posibles..

Bueno.. a ver si ahora me he explicado un poco mejor...
  #6 (permalink)  
Antiguo 06/09/2004, 16:06
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola de nuevo :

clandernet : Te habías explicado bien. Yo estaba seguro de haber visto un select desplegable en el que se podía limitar la cantidad de opciones visibles, pero seguramente lo soñé; si existiera debería tener un ejemplo y no tengo ninguno.

Con respecto a lo del ancho, el width funciona pero no sirve. La idea es que al ocultar las opciones se pueda leer en el recuadro cuál fue seleccionada; si reduces el ancho ésta se lee parcialmente, y no es posible poner scrollbars debajo del recuadro: en algún caso, la barra terminaría siendo más grande que el select. Por eso propuse el engendro del "opción múltiple dentro de un DIV".

Varias veces mencioné que para evitar las limitaciones de formato en los elementos de formulario, lo mejor es crear nuestras propias versiones en HTML, CSS y JS. Es una posición algo radical, pero a mí me dió resultado.

Te dejo un enlace para que mires

descripcion de un select

y un código que permite ver la opción seleccionada aunque supere la capacidad del "select". Usa etiquetas propietarias de IE, pero porque es sólo un experimento de muestra. El value del input type='button' se maneja igual que el del input type='text' , y existen decenas de scripts para desplazar texto dentro de un input en cualquier navegador.

Código:
<html>
<head> <title> MENÚ DESPLEGABLE IE.</title>
<script>

function despliega(){
if(formulario.selector.style.display=="inline"){
formulario.selector.style.display="none";}
else {formulario.selector.style.display="inline"};
valor();
}

function oculta(){
formulario.selector.style.display="none";
valor();
}

function valor(){
dato=formulario.selector.value;
document.getElementById("marquesina").innerText=dato;
document.getElementById("marquesina").scrollAmount=1;
if(dato!="Click para elegir una opcion")
document.getElementById("muestra").innerText=dato+" "+dato;
}
</script>
<style>
#boton,#marcoSel{width:80px; cursor:default}
#marquesina{cursor:default}
#selector{display:none}
#marcoSel{overflow:auto; border-collapse:collapse}
#contenedor{display:inline; position:absolute; z-index:9999}
</style>
</head>
<body onload=setTimeout('document.getElementById("marquesina").scrollAmount=0',1600);>
<h2>Muestra un menú desplegable con la opción elegida desplazándose en el botón.</h2>

El botón y las opciones tienen ancho fijo; el menú tiene barras de desplazamiento.

<form name="formulario" id="formulario">
Menú desplegable : 
<div name="contenedor" id="contenedor"> 
<button name="boton" id="boton" onclick="despliega()" ><marquee name="marquesina" id="marquesina" scrollamount="2">▼</marquee> </button><br>
<div name="marcoSel" id="marcoSel" >
<select size="8" name="selector" id="selector" onchange="oculta()" >
<option value="Click para elegir una opcion" selected="selected"> </option>
<option value="Adrenalina">Adrenalina</option>
<option value="Bonificación">Bonificación</option>
<option value="Calificativo">Calificativo</option>
<option value="Desmitificar">Desmitificar</option>
<option value="Ecosistema">Ecosistema</option>
<option value="Fluorescente">Fluorescente</option>
<option value="Gastroenterocolitis">Gastroenterocolitis</option>
</select>
</div>
</div>
</form>
Valor² : <span id="muestra">__________________</span>

</body>
</html>
saludos

furoya
  #7 (permalink)  
Antiguo 27/01/2011, 03:19
 
Fecha de Ingreso: octubre-2010
Mensajes: 189
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: OPCIONES DE UN "SELECT" CON SCROLL

Cita:
Iniciado por La2daElegida Ver Mensaje
<select name="select" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>

Con size le das el total de filas que queres mostrar.
Muchas gracias!
Me queda una duda. Si añadimos la etiqueta option multiple y ponemos size="1", sólo aparece la primera opción sin ningún scroll( al menos en Firefox).
Y si size es mayor que "1" aparece el scroll vertical, pero no el desplegable!!

Saludos
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 11:24.