Come creare una casella di riepilogo in HTML senza consentire la selezione multipla?

97

Non ho molta esperienza in HTML. Sto cercando di creare una semplice casella di riepilogo, ma uno dei requisiti è DISATTIVARE la selezione multipla. La maggior parte del codice per le listbox funziona in questo modo:

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

Ma questo consente una selezione multipla.

Qui è stata posta una domanda simile, ma la risposta "migliore" è stata sottovalutata. Quindi non sono sicuro di come altro potrebbe essere fatto. Per favore aiuto.

html listbox

— Codice blu
fonte

5

Per voi altri nuovi arrivati, evitate il suddetto sito Web per il vostro bene: hanno una buona SEO ma questo è tutto. È pieno di cattive pratiche e abitudini che ti pentirai di aver imparato in seguito. Utilizza l'API di MDN (Mozilla), in questo caso developer.mozilla.org/en-US/docs/Web/HTML/Element/select .

— Ben

3

@Steve, grazie per l'avvertimento. Anche il suo commento "Questo è il motivo per cui ho un lavoro" è apparso arrogante. Se hai un lavoro, buon per te. Questo è un forum per risposte e non pubblicità.

— CodeBlue

170

Usa semplicemente l'attributo size:

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

Per chiarire, l'aggiunta dell'attributo size non ha rimosso la selezione multipla.

La selezione singola funziona perché hai rimosso l'attributo multiple = "multiple".

Aggiungere l'attributo size = "5" è comunque una buona idea, significa che devono essere visualizzate almeno 5 righe. Vedi il riferimento completo qui

— aaroncatlin
fonte

2

Votato per la verità. Inoltre, quando la domanda è stata pubblicata in precedenza, questa soluzione potrebbe non essere stata ampiamente supportata da tutti i browser.

— aaroncatlin

Probabilmente è stato downvoted perché non c'è nulla negli standard HTML che richiedono al browser di renderlo come una casella di riepilogo se l'attributo size è impostato. Sì, tutti i principali browser attualmente lo fanno, ma non c'è alcuna garanzia che lo faranno sempre. Realisticamente, tuttavia, questo sarebbe un cambiamento radicale per così tanti siti Web, è probabile che nessun browser lo cambi.

— Elezar

1

Lo standard è aperto a una piccola interpretazione: "La dimensione di visualizzazione di un elemento select è il risultato dell'applicazione delle regole per l'analisi di interi non negativi al valore dell'attributo size dell'elemento , se ne ha uno, e l'analisi ha esito positivo." Sebbene ciò non specifichi specificamente che dovrebbe essere visualizzato come un elenco a discesa o una casella di riepilogo, sarebbe difficile visualizzare un controllo a discesa che mostra più di 1 elemento. ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

Grazie!! E questo potrebbe essere dinamico, ovviamente, con Js: D

— Jcc.Sanabria

56

Rimuovi l'attributo multiple = "multiple" e aggiungi SIZE = 6 con il numero di elementi che desideri

potresti voler controllare questo sito

http://www.htmlcodetutorial.com/forms/_SELECT.html

— pollirrata
fonte

2

Per Asp.Net MVC

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

o

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })

— Deshani Tharaka
fonte