html selezionare la barra di scorrimento

come si aggiunge una barra di scorrimento alla casella di selezione html? c'è qualche libreria javascript che emuli questo comportamento?html selezionare la barra di scorrimento

o c'è comunque di ridisegnare l'interfaccia ho 2 casella di selezione, gli elementi possono essere spostati per la casella di selezione a destra via >> & < < Filezilla, comandante Norton, comandante tipo totale di interfaccia in cui gli oggetti possono essere spostati a sinistra e proprio ... (questione è come ridisegnare di vedere le parole di overflow nella casella di selezione a larghezza fissa)

da this forum post, indicando un'altra example, il codice di esempio si overlay usando div per visualizzare il testo aggiuntivo, ma richiede all'utente di passare con il mouse sulle opzioni. non è davvero la soluzione che sto cercando, anche se lo userò per il 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>

il browser di destinazione è MSIE. dal codice di cui sopra, l'utente non può vedere 'opzione 1 L'opzione lunga' ecc ... e ogni opzione dovrebbe avere fino a un massimo di 200 carati.

fonte

2009-05-23 zeroin23

opzioni

uno sarà per mostrare l'opzione selezionata sopra (o sotto) la lista di selezione come segue:

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: - Imposta l'altezza di div # selText altrimenti continuerà a spostare l'elenco di selezione verso il basso.

fonte

2009-05-23 08:33:30 TheVillageIdiot

Questa è un'ottima risposta, ma forse è necessario ricordare che il frammento di javascript richiede jQuery. –

Grazie a @Jose. Sto lavorando con jQuery da molti giorni quindi ho pensato che fosse già presente !!! – TheVillageIdiot

c'è una presa che ho dimenticato di menzionare, è una multi selezione. – zeroin23

Le barre di scorrimento orizzontali in una selezione HTML non sono supportate in modo nativo. Tuttavia, ecco un modo per creare l'aspetto di una barra di scorrimento orizzontale:

1. Innanzitutto creare una classe 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. Avvolgere SELECT all'interno di un DIV - anche, impostare in modo esplicito la dimensione al numero di opzioni.

<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>

fonte

2009-05-26 04:47:27

+1 questa soluzione funziona con IE7 ma non con IE6 purtroppo ... ma era quello che stavo cercando di realizzare. – zeroin23

html selezionare la barra di scorrimento

risposta

Problemi correlati