barra de desplazamiento de selección html

¿cómo se agrega una barra de desplazamiento al cuadro de selección html? ¿Hay alguna biblioteca de JavaScript que emule este comportamiento?barra de desplazamiento de selección html

o hay alguna forma de rediseñar, la interfaz He 2 selecciona cuadro, los artículos pueden ser desplazado a la derecha a través de cuadro de selección >> & < < Filezilla, comandante Norton, amable comandante total de la interfaz donde los artículos se pueden desplazar a la izquierda y la derecha ... (pregunta es cómo rediseñar para ver las palabras de desbordamiento en el cuadro de selección de ancho fijo)

de this forum post, apuntando a otro example, el código de ejemplo de superposición usando div para mostrar el texto adicional, pero requiere que el usuario pase el mouse sobre las opciones. realmente no es la solución que estoy buscando, aunque la usaré por el momento.

<html> 

<body> 
<table> 
<tr><td> 
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;"> 
    <option value="1" selected>option 1 The Long Option</option> 
    <option value="2">option 2</option> 
    <option value="3">option 3</option> 
    <option value="4">option 4</option> 
    <option value="5">option 5 Another Longer than the Long Option ;)</option> 
    <option value="6">option 6</option> 
</select> 
</td> 
<td> 
<input type="button" value=">>"/><br> 
<input type="button" value="<<"/> 
</td> 
<td> 
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;"> 
    <option value="1" selected>option 1 The Long Option</option> 
    <option value="2">option 2</option> 
    <option value="3">option 3</option> 
    <option value="4">option 4</option> 
    <option value="5">option 5 Another Longer than the Long Option ;)</option> 
    <option value="6">option 6</option> 
</select> 
</td> 
</tr> 
</table> 
</body> 
</html>

El navegador de destino es MSIE. del código anterior, el usuario no puede ver 'opción 1 La opción larga', etc. y se supone que cada opción tiene un máximo de 200 caracteres.

Fuente

2009-05-23 zeroin23

opciones

uno será para mostrar la opción seleccionada por encima (o por debajo) de la lista de selección como el siguiente:

HTML

<div id="selText"><span>&nbsp;</span></div><br/> 
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;"> 
    <option value="1" selected>option 1 The Long Option</option> 
    <option value="2">option 2</option> 
    <option value="3">option 3</option> 
    <option value="4">option 4</option> 
    <option value="5">option 5 Another Longer than the Long Option ;)</option> 
    <option value="6">option 6</option> 
</select>

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 
    type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){   
    $("select#mySelect").change(function(){ 
     //$("#selText").html($($(this).children("option:selected")[0]).text()); 
     var txt = $($(this).children("option:selected")[0]).text(); 
     $("<span>" + txt + "<br/></span>").appendTo($("#selText span:last")); 
    }); 
}); 
</script>

PS: - Establecer la altura de div # selText de lo contrario, seguirá desplazando la lista de selección hacia abajo.

Fuente

2009-05-23 08:33:30 TheVillageIdiot

Esta es una muy buena respuesta, pero tal vez deba mencionar que el fragmento de javascript requiere jQuery. –

Gracias @Jose. ¡Estoy trabajando con jQuery desde hace muchos días, así que pensé que ya estaba presente! – TheVillageIdiot

hay una trampa que olvidé mencionar, es una selección múltiple. – zeroin23

Las barras de desplazamiento horizontales en un HTML Select no son compatibles de forma nativa. Sin embargo, aquí hay una manera de crear la apariencia de una barra de desplazamiento horizontal:

1. En primer lugar crear una clase css

<style type="text/css"> 
.scrollable{ 
    overflow: auto; 
    width: 70px; /* adjust this width depending to amount of text to display */ 
    height: 80px; /* adjust height depending on number of options to display */ 
    border: 1px silver solid; 
} 
.scrollable select{ 
    border: none; 
} 
</style>

2. Envuelva el SELECT dentro de un DIV - Además, establezca explícitamente el tamaño al número de opciones.

<div class="scrollable"> 
<select size="6" multiple="multiple"> 
    <option value="1" selected>option 1 The Long Option</option> 
    <option value="2">option 2</option> 
    <option value="3">option 3</option> 
    <option value="4">option 4</option> 
    <option value="5">option 5 Another Longer than the Long Option ;)</option> 
    <option value="6">option 6</option> 
</select> 
</div>

Fuente

2009-05-26 04:47:27

+1 esta solución funciona con IE7 pero no IE6 tristemente ... pero era lo que estaba tratando de lograr. – zeroin23

barra de desplazamiento de selección html

Respuesta

Cuestiones relacionadas