C'è un modo per avere righe multiple in un elemento <option>?Puoi avere più linee in un elemento ?
Ti piace questa:
-------------------------
| Normal <option> element |
-------------------------
| <option> element broken |
| onto two lines |
-------------------------
| Normal <option> element |
-------------------------
non v'è alcun approccio HTML/CSS, o dovrei usare JavaScript?
È un caso particolare di visualizzazione di tag HTML all'interno di un elemento <option></option>. Per quanto ne so, i browser si comportano in modo molto diverso in quest'area (Firefox visualizza anche le immagini, altri browser ignorano la maggior parte o tutti i tag) e non esiste una soluzione cross-browser. Probabilmente dovrai emularlo con JavaScript e un diverso markup.
A http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html dicono:
contenuti consentiti: caratteri normali dati
... che è definito al http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
La specifica è difficile da capire, come al solito, ma capisco che non è possibile inserire un valore letterale < (ovvero un tag HTML come <br>). Non riesco a trovare dove definisce il comportamento con spazio vuoto ma la maggior parte dei browser sembra comprimerlo.
Il problema con select è che si tratta di elementi del modulo OS in contrapposizione agli elementi del modulo Web. Ecco perché non è possibile modificarli in alcuni browser (tosse ... IE6) a differenza di altri input. Hai visto un esempio di questo ovunque? Siccome il sistema operativo non è adatto a questo, il browser non lo farà.
Vorrei anche sottolineare che non è molto facile da usare. Gli utenti sono abituati all'idea di una casella di selezione contenente opzioni su singole linee. Se si inizia a metterli su più righe, si sta andando contro l'usabilità della casella di selezione e l'accessibilità intrinseca. Potrebbe non essere una buona idea prendere questa strada.
Solo la mia opinione, ma spero che abbia senso.
Poiché questa risposta è vecchia di quasi 3,5 anni, aggiungerei ora che esistono numerose librerie JS per il restyling della casella di selezione. Alcuni di questi, per la loro stessa natura, forzeranno le opzioni di selezione su due linee. Se questa è ancora una preoccupazione per le persone là fuori, allora questa potrebbe essere un'opzione. Tieni presente che molte delle librerie di stili non sono supportate su iOS o Android. – tadywankenobi
Ho paura di no. I browser sembrano ignorare i caratteri di nuova riga e i tag HTML <br> all'interno degli elementi <option> e non penso che JavaScript fornisca alcun modo per manipolare l'aspetto di questo testo.
No, sarà necessario creare un elenco a discesa personalizzato per una cosa del genere.
jQuery offre molti di questi; probabilmente puoi usare i CSS per definire height per opzioni specifiche per ottenere ciò che ti serve.
Questo non può essere ciò che si vuole, ma si può ottenere due righe per opzione, utilizzando il tag "optgroup" es:
<select>
<optgroup label="Click below for 'yes'">
<option value="yes">Yes</option>
</optgroup>
<optgroup label="Click below for 'No'">
<option value="no">No</option>
</optgroup>
</select>
Ciò non consente di separare UN'opzione su DUE linee –
HotKey, in senso stretto hai ragione. Quello che ho suggerito dà l'effetto di dividere un'opzione su due righe (vedi http://jsfiddle.net/elusien/Sqc6Z/). Qualunque opzione l'utente scelga, viene restituita solo la seconda riga. In mia difesa ho detto che questo potrebbe non essere ciò che si desidera. – Neil
In realtà, hai idea di dividere l'opzione e rinviare un gruppo non sembra affatto una cattiva idea. Ma dicendo così, come funzionerebbe con una fonte di dati? –
ciò che è media da più linee in un elemento un'opzione? – Vivek
normalmente hai una riga in un elemento opzione che selezioni, voglio avere due linee in quell'elemento, quindi ad es. ogni opzione ha 2 linee –
Usa Javascript. –