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
