Wie erstelle ich eine Listbox in HTML, ohne Mehrfachauswahl zuzulassen?

97

Ich habe nicht viel Erfahrung mit HTML. Ich möchte eine einfache Listbox erstellen, aber eine der Anforderungen besteht darin, die Mehrfachauswahl NICHT zuzulassen. Der größte Teil des Codes für Listboxen sieht folgendermaßen aus:

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

Dies ermöglicht jedoch eine Mehrfachauswahl.

Hier wurde eine ähnliche Frage gestellt, aber die "beste" Antwort wurde abgelehnt. Ich bin mir also nicht sicher, wie das sonst gemacht werden könnte. Bitte helfen Sie.

html listbox Code blau
quelle
5
Vermeiden Sie für andere Neulinge die oben genannte Website zu Ihrem eigenen Besten - sie haben eine gute Suchmaschinenoptimierung, aber das war es auch schon. Es ist voller schlechter Praktiken und Gewohnheiten. Es tut Ihnen leid, dass Sie später gelernt haben. Verwenden Sie die API von MDN (Mozilla), in diesem Fall developer.mozilla.org/en-US/docs/Web/HTML/Element/select .
Ben
3
@Steve danke für die Warnung. Sein Kommentar "Deshalb habe ich einen Job" wirkte ebenfalls arrogant. Wenn Sie einen Job haben, gut für Sie. Dies ist ein Forum für Antworten und keine Werbung.
CodeBlue

Antworten:

170

Verwenden Sie einfach das Größenattribut:

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

Zur Verdeutlichung wurde durch Hinzufügen des Größenattributs die Mehrfachauswahl nicht entfernt.

Die Einzelauswahl funktioniert, weil Sie das Attribut multiple = "multiple" entfernt haben.

Das Hinzufügen des Attributs size = "5" ist immer noch eine gute Idee. Dies bedeutet, dass mindestens 5 Zeilen angezeigt werden müssen. Die vollständige Referenz finden Sie hier

aaroncatlin
quelle
2
Für die Wahrheit gestimmt. Wenn die Frage zuvor gestellt wurde, wurde diese Lösung möglicherweise nicht von allen Browsern so umfassend unterstützt.
Aaroncatlin
Es wurde wahrscheinlich herabgestuft, weil es in den HTML-Standards nichts gibt, was es erforderlich macht, dass der Browser es als Listbox rendert, wenn das Größenattribut festgelegt ist. Ja, alle gängigen Browser tun dies derzeit, aber es gibt keine Garantie dafür, dass dies immer der Fall ist. Realistisch gesehen wäre dies jedoch eine bahnbrechende Änderung für so viele Websites, dass es wahrscheinlich kein Browser ändern wird.
Elezar
1
Der Standard ist offen für eine kleine Interpretation: „Die Anzeigegröße eines select - Elements ist das Ergebnis der Anwendung der Regeln für das Parsen von nicht negativen ganzen Zahlen auf den Wert des Elements Größe Attribut, wenn sie eine hat und Parsen es erfolgreich ist.“ Dies bedeutet zwar nicht ausdrücklich, dass es als Dropdown- oder Listbox angezeigt werden soll, es ist jedoch schwierig, ein Dropdown-Steuerelement anzuzeigen, das mehr als ein Element anzeigt. ( html.spec.whatwg.org/#the-select-element )
aaroncatlin
Vielen Dank!! Und dies könnte natürlich dynamisch sein mit Js: D
Jcc.Sanabria
56

Entfernen Sie das Attribut multiple = "multiple" und fügen Sie SIZE = 6 mit der Anzahl der gewünschten Elemente hinzu

Vielleicht möchten Sie diese Seite überprüfen

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

Pollirrata
quelle
2

Für Asp.Net MVC

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

oder

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