Come posso limitare il numero di opzioni visualizzate in un HTML <select>?Come posso limitare le opzioni visibili in un menu a discesa HTML ?
Ad esempio:
<select>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="20">20</option>
</select>
Come posso ottenere il browser per visualizzare solo le prime cinque opzioni e scorrere verso il basso per il resto?
la dimensione attribuiscono le cose, se si visualizzeranno le size = 5 allora primi 5 articoli e per gli altri è necessario scorrere verso il basso ..
<select name="numbers" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
Se usiamo il parametro size esso non viene visualizzato come menu a discesa, ma ho bisogno come menu a discesa – vinox
È possibile utilizzare l'attributo size per rendere la <select> appaiono come una casella invece di un menu a discesa. Il numero che si utilizza nell'attributo size definisce quante opzioni sono visibili nella casella senza scorrere.
<select size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
Non è possibile applicare ad un <select>e farlo apparire ancora come un elenco a discesa però. Il browser/sistema operativo deciderà il numero di opzioni da visualizzare per gli elenchi a discesa, a meno che non si utilizzi HTML, CSS e JavaScript per creare un elenco a discesa fittizio.
Utilizzare l'attributo size di <select>;
Non è possibile limitare il numero di elementi visibili nel menu a discesa di selezione (se lo si utilizza come casella a discesa e non come elenco).
Ma potresti usare javascript/jQuery per sostituire questa selectbox con qualcos'altro, che sembra proprio una casella a discesa. Quindi puoi gestire l'altezza del menu a discesa come desideri.
jNice sarebbe un plugin jQuery che ha tali caratteristiche. Ma esistono anche molte alternative per questo.
Si può provare questo
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
Ha funzionato per me
Questo esegue il ridimensionamento in modo corretto, ma si blocca IE 11 quando si seleziona un valore. Sfocatura funziona trovare. Chrome funziona bene. Qualche idea? –
Tnx @ Raj_89, il tuo trucco era molto buona, può essere meglio, solo con l'uso stile in più, che lo rendono su altri dom oggetti, esattamente come un tag selezionare l'opzione comune in html ...
select{
position:absolute;
}
u può vedere risultato qui: http://jsfiddle.net/aTzc2/
0.123.La soluzione Raj_89 è la più vicina all'opzione valida anche se citato da Kevin Swarts in un commento che interromperà IE, che per un numero elevato di client aziendali è un problema (e dirà al client che non si codificherà per IE "perché ragioni" è improbabile che renda felice il tuo capo;)).
Così ho giocato con esso e qui è il problema: l'evento "onmousedown" sta entrando in forma in IE, quindi quello che vogliamo fare è prevenire l'impostazione predefinita quando l'utente fa clic sul menu a discesa per la prima volta.È importante questo è solo il momento in cui lo facciamo: se impediamo la defunta al clic successivo, quando l'utente effettua la sua scelta, l'evento onchange non si attiva.
In questo modo otteniamo un bel menu a discesa, senza sfarfallio, senza abbattere IE - funziona solo ... beh almeno in IE10 e versioni successive, e ultime versioni di tutti gli altri principali browser.
<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
<option></option>
<option>IE 9</option>
<option>IE 10</option>
<option>Edge</option>
<option>Firefox</option>
<option>Chrome</option>
<option>Opera</option>
</select>
Ecco il violino: https://jsfiddle.net/88cxzhom/27/
Poche altre cose da notare: 1) Il posizionamento assoluto e l'impostazione z-index è utile per evitare di spostare altri elementi quando sono visualizzate le opzioni. 2) Usa la proprietà 'currentTarget' - questo sarà l'elemento di selezione su tutti i browser. Mentre 'target' sarà selezionato in IE, il resto ti permetterà di lavorare con l'opzione.
Spero che questo aiuti qualcuno.
Ho usato questo codice e ha funzionato per me su Chrome, Firefox e IE.
<select onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()" onblur="this.size=0;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>
Grazie! Sfortunatamente, l'attributo size non è quello che stavo cercando perché rende visibili tutte le opzioni x. Stavo cercando di evitare javascript per un problema così piccolo ma fastidioso. Tuttavia, sembra che non abbia altra scelta. – medowlock
sì. Personalmente non l'ho mai visto come un problema, dato che tutti i '' funzionano in questo modo sul web. Ma se è necessario per i tuoi scopi, temo che dovrai costruirti da solo con JavaScript. –
Non capirò mai come i produttori di browser non stiano sviluppando WebComponents e quant'altro e non riescano a trovare qualcosa di semplice come questo. qualche sviluppatore ha mai detto 'hmm mi piacerebbe limitare il numero di elementi mostrati nel mio menu a discesa di selezione ... quella brutta cosa da elenco andrà benissimo!' – Petrov