Setzen Sie die Auswahloption im HTML-Auswahlelement standardmäßig auf leer

Lesezeit: 7 Minuten

Benutzeravatar von Pankaj Parashar
Pankaj Parashar

Ich muss standardmäßig keine Option im Dropdown-Menü in HTML auswählen. Allerdings kann ich nicht verwenden:

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Denn dafür muss ich validieren, um die erste Option zu handhaben.

Kann mir jemand dabei helfen, dieses Ziel zu erreichen, ohne tatsächlich die erste Option als Teil des select-Tags aufzunehmen?

  • Soweit ich weiß, ist dies die einzige Möglichkeit, eine leere Zeile zu erhalten. Was meinst du damit, dass du eine Validierung durchführen musst? Setzen Sie einfach ein Häkchen, um zu sagen, ob value=”” dann false zurückgeben.

    – Robert

    22. Dezember 2011 um 14:50 Uhr

  • Dies wäre eine gute Gelegenheit, Optionsfelder anstelle eines Dropdown-Menüs zu verwenden.

    – Brandstifter

    27. Oktober 2015 um 20:37 Uhr


  • Meiner Meinung nach überhaupt keine seltsame Anforderung. Ich bin im selben Boot. Ich brauche auch eine “Keine Option”-Standardeinstellung. Ich habe mehrere Drop-down-Menüs, die zum Senden eines Formulars nicht erforderlich sind. Wenn Sie sie auf diese Weise deaktivieren, wird verhindert, dass der Benutzer eine Auswahl treffen muss, wenn sie nicht relevant ist. Gute Frage! +1

    – Großartiger Scott

    13. Januar 2016 um 22:26 Uhr

  • Keine seltsame Anforderung, wenn das SELECT ein ERFORDERLICHES Attribut hatte, dann ist eine Platzhalter-Label-Option eine Anforderung von HTML5 dev.w3.org/html5/spec-preview/…

    – Testo Testini

    19. Januar 2017 um 16:22 Uhr

  • @Blazemonger Optionsfelder sind eine schlechte Idee, wenn Sie mehr als 3 oder 4 haben. Stellen Sie sich eine Dropdown-Liste mit mehr als 15 Optionen oder 50 oder mehr vor? Diese haben in vielen Fällen ihre eigenen Designprobleme, aber das Problem besteht immer noch darin, dass Optionsfelder nicht gut skaliert werden überhaupt.

    – TylerH

    28. März 2019 um 16:43 Uhr

Benutzeravatar von gam6itko
gam6itko

Vielleicht ist dies hilfreich

<select>
  <option disabled selected value> -- select an option -- </option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

-- select an option -- Wird standardmäßig angezeigt. Aber wenn Sie eine Option wählen, können Sie sie nicht zurückwählen.

Sie können es auch ausblenden, indem Sie ein Leerzeichen hinzufügen option

<option style="display:none">

Daher wird es nicht mehr in der Liste angezeigt.

Option 2

Wenn Sie kein CSS schreiben möchten und das gleiche Verhalten der obigen Lösung erwarten, verwenden Sie einfach:

<option hidden disabled selected value> -- select an option -- </option>

  • Hier ist ein JSFiddle der oben genanntenfalls es jemand braucht.

    – Uwe Keim

    15. März 2016 um 9:33 Uhr

  • @azerafati Wie @Rafael_Mori betonte, können Sie dasselbe erreichen, indem Sie das Attribut “hidden” verwenden, sodass kein CSS erforderlich ist. Nur reines HTML5 😉 <option hidden disabled selected value> -- select an option -- </option>

    – BrainOverflow

    26. März 2017 um 11:43 Uhr


  • Was ist, wenn ich in der Lage sein möchte, es wieder auszuwählen? Ich möchte nur nicht, dass es etwas sendet. Ist es möglich?

    – Michael Rogers

    9. März 2019 um 18:39 Uhr

  • Beachten Sie, dass sowohl das versteckte Attribut als auch der Anzeigestil im IE nicht funktionieren, nicht einmal 11. stackoverflow.com/questions/58862242/…

    – Jazkowski

    11. April 2020 um 16:22 Uhr

  • Was bewirkt der Blindwert?

    – Sebastian Thomas

    11. Juni 2020 um 17:00 Uhr

Benutzeravatar von Matschie
Matschi

Sie könnten Javascript verwenden, um dies zu erreichen. Versuchen Sie den folgenden Code:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select> 

JS

document.getElementById("myDropdown").selectedIndex = -1;

oder JQuery

$("#myDropdown").prop("selectedIndex", -1);

  • Diese Lösung funktioniert teilweise mit Chrome 35: Das Dropdown-Menü zeigt keine Auswahl an, wenn die Optionsliste unsichtbar ist, zeigt jedoch die erste ausgewählte Option, wenn die Optionsliste sichtbar gemacht wird. Safari 7 verhält sich aber wie vorgesehen.

    – Flochtililoch

    7. Juli 2014 um 21:25 Uhr


  • Das Interessante ist: Das funktioniert mit der HTML-Formularvalidierung. Wenn Sie die verwenden required Attribut auf der select Element eingeben und senden, ohne eine Option auszuwählen, schlägt die Formularvalidierung fehl und Sie werden darauf hingewiesen, dass Sie eine Auswahl treffen müssen. Daher gefällt mir dieser Ansatz sehr gut. (Zumindest in Chrome getestet)

    – Andreas Linnert

    11. Februar 2017 um 10:28 Uhr

  • Funktioniert nicht (zumindest in aktuellen Browsern zum Zeitpunkt dieses Schreibens – und verlässt sich unnötigerweise auf Javascript.

    – Schweigen

    18. Mai 2018 um 19:40 Uhr

  • Ab 2019 weigert sich nur Safari IOS 10, mitzuspielen

    – Ayyash

    1. Juli 2019 um 18:22 Uhr

Benutzeravatar von GlenPeterson
GlenPeterson

Heute (2015-02-25)

Dies ist gültiges HTML5 und sendet ein Leerzeichen (kein Leerzeichen) an den Server:

<option label=" "></option>

Geprüfte Gültigkeit am http://validator.w3.org/check

Verifiziertes Verhalten mit Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)

Folgendes besteht auch die Validierung Heuteübergibt aber von den meisten Browsern eine Art Leerzeichen an den Server (wahrscheinlich nicht erwünscht) und bei anderen ein Leerzeichen (Chrome40/Linux übergibt ein Leerzeichen):

<option>&#160;</option>

Früher (2013-08-02)

Gemäß meinen Notizen hat die Entität ohne Umbruch-Leerzeichen in den oben gezeigten Options-Tags im Jahr 2013 den folgenden Fehler erzeugt:

Fehler: W3C-Markup-Validierungsdienst (öffentlich): Das erste untergeordnete Optionselement eines Auswahlelements mit einem erforderlichen Attribut und ohne Mehrfachattribut und dessen Größe 1 ist, muss entweder ein leeres Wertattribut oder keinen Textinhalt haben.

Damals war ein reguläres Leerzeichen gültiges XHTML4 und schickte von jedem Browser ein Leerzeichen (kein Leerzeichen) an den Server:

<option> </option>

Zukunft

Es würde mich sehr freuen, wenn die Spezifikation aktualisiert würde, um explizit eine leere Option zuzulassen. Verwenden Sie vorzugsweise die kürzeste Syntax. Eines der folgenden wäre großartig:

<option />
<option></option>

Testdatei

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>

<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>

</html>

Benutzeravatar von Rafael Mori
Raffael Mori

<td><b>Field Label:</b><br>
    <select style="align:left; width:100%;" id='some_id' name="some_name">
    <option hidden selected>Select one...</option>
    <option value="Value1">OptLabel1</option>
    <option value="Value2">OptLabel2</option>
    <option value="Value3">OptLabel3</option></select>
</td>

Setzen Sie einfach “versteckt” auf die Option, die Sie in der Dropdown-Liste ausblenden möchten.

Lösung, die nur mit CSS funktioniert:

A: Inline-CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

B: CSS-Stylesheet

Wenn Sie eine CSS-Datei zur Hand haben, können Sie die erste anvisieren option mit:

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Benutzeravatar von Uwe Keim
Uwe Keim

Das sollte helfen:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

Benutzeravatar von Andreas Rozek
Andreas Rosek

Nur eine kleine Anmerkung:

einige Safari-Browser scheinen weder das “hidden”-Attribut noch die Stileinstellung “display:none” zu beachten (getestet mit Safari 12.1 unter MacOS 10.12.6). Ohne expliziten Platzhaltertext zeigen diese Browser einfach eine leere erste Zeile in der Liste der Optionen. Es kann daher sinnvoll sein, diesen „Dummy“-Eintrag immer mit einem erläuternden Text zu versehen:

<option hidden disabled selected value>(select an option)</option>

Dank des “disabled”-Attributs wird es ohnehin nicht aktiv ausgewählt.

1446280cookie-checkSetzen Sie die Auswahloption im HTML-Auswahlelement standardmäßig auf leer

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy