Standardauswahloption als leer

458

Ich habe eine sehr seltsame Anforderung, bei der standardmäßig keine Option im Dropdown-Menü in HTML ausgewählt sein muss. Jedoch,

Ich kann das nicht benutzen,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Erweitern Sie das Snippet

Dafür muss ich eine Validierung durchführen, um die erste Option zu handhaben. Kann mir jemand helfen, dieses Ziel zu erreichen, ohne die erste Option als Teil des Auswahl-Tags aufzunehmen?

html Pankaj Parashar
quelle
2
Soweit ich weiß, ist dies der einzige Weg, um 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 = "", und geben Sie false zurück.
Robert
1
Dies wäre eine gute Gelegenheit, Optionsfelder anstelle eines Dropdowns zu verwenden.
Blazemonger
9
Meiner Meinung nach überhaupt keine seltsame Anforderung. Ich bin im selben Boot. Ich benötige ebenfalls die Standardeinstellung "Keine Option". Ich habe mehrere Dropdown-Listen, die zum Senden eines Formulars nicht erforderlich sind. Wenn Sie sie auf diese Weise deaktivieren, muss der Benutzer keine Auswahl treffen, wenn dies nicht relevant ist. Gute Frage! +1
Scott
Keine seltsame Anforderung, wenn das SELECT-Attribut ein REQUIRED-Attribut hatte, ist es eine Anforderung von HTML5 dev.w3.org/html5/spec-preview/…
Testo Testini
@Blazemonger Optionsfelder sind eine schreckliche 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 überhaupt nicht gut skaliert werden können .
TylerH

Antworten:

1014

Vielleicht ist das 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. Wenn Sie jedoch eine Option auswählen, können Sie sie nicht wieder auswählen.

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

<option style="display:none">

es wird also nicht mehr in der Liste angezeigt.

Option 2

Wenn Sie kein CSS schreiben möchten und dasselbe Verhalten wie bei der obigen Lösung erwarten, verwenden Sie einfach:

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

Gambit
quelle
15
Hier ist eine JSFiddle der oben genannten , falls jemand sie benötigt.
Uwe Keim
26
@azerafati, wie @Rafael_Mori betonte, können Sie dasselbe erreichen, indem Sie das Attribut "versteckt" verwenden, sodass kein CSS erforderlich ist. Nur reines HTML5;)<option hidden disabled selected value> -- select an option -- </option>
BrainOverflow
Was ist, wenn ich es wieder auswählen möchte? Ich möchte nur nicht, dass es etwas sendet. Ist es möglich?
Michael Rogers
1
Das Hinzufügen eines versteckten Attributs zum Optionselement hat die Magie für mich bewirkt! Ich hatte nicht erwartet, dass es so einfach sein würde. danke
S. Domeng
Beachten
Sie
113

Sie können 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);
Matschie
quelle
Diese Lösung funktioniert teilweise mit Chrome 35: In der Dropdown-Liste wird keine Auswahl angezeigt, wenn die Liste der Optionen unsichtbar ist, sondern die erste Option, die ausgewählt wurde, wenn die Liste der Optionen sichtbar gemacht wird. Safari 7 verhält sich jedoch wie beabsichtigt.
Flochtililoch
Das Interessante ist: Dies funktioniert mit der Validierung von HTML-Formularen. Wenn Sie das requiredAttribut für das selectElement verwenden und senden, ohne eine Option auszuwählen, schlägt die Formularüberprüfung fehl und Sie müssen eine Auswahl treffen. Deshalb mag ich diesen Ansatz sehr. (Zumindest in Chrome getestet)
Andreas Linnert
Funktioniert nicht (zumindest in aktuellen Browsern zum jetzigen
Zeitpunkt
1
Ab 2019 weigert sich nur Safari IOS 10, damit Ball zu spielen
Ayyash
36

Heute (25.02.2015)

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

<option label=" "></option>

Überprüfte Gültigkeit auf 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)

Im Folgenden geht auch die Validierung heute , sondern geht eine Art von Leerzeichen zu den Server von den meisten Browsern (wahrscheinlich nicht wünschenswert) und eine leere auf andere (Chrome40 / Linux passiert ein Leerzeichen):

<option>&#160;</option>

Zuvor (2013-08-02)

Gemäß meinen Anmerkungen hat die nicht unterbrechende Entität in den oben gezeigten Options-Tags 2013 den folgenden Fehler verursacht:

Fehler: W3C Markup Validaton Service (Public): Das erste untergeordnete Optionselement eines Auswahlelements mit einem erforderlichen Attribut und ohne Mehrfachattribut und dessen Größe 1 muss entweder ein leeres Wertattribut oder keinen Textinhalt enthalten.

Zu diesem Zeitpunkt war ein reguläres Leerzeichen XHTML4 gültig und hat von jedem Browser ein Leerzeichen (kein Leerzeichen) an den Server gesendet:

<option> </option>

Zukunft

Es würde mein Herz freuen, wenn die Spezifikation aktualisiert würde, um ausdrücklich eine leere Option zuzulassen. Verwenden Sie vorzugsweise die kürzeste Syntax. Beides 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>
GlenPeterson
quelle
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
Erweitern Sie das Snippet

Setzen Sie einfach "versteckt" auf die Option, die Sie in der Dropdown-Liste verstecken möchten.

Rafael Mori
quelle
8

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>
Erweitern Sie das Snippet

B: CSS-Stylesheet

Wenn Sie eine CSS-Datei zur Hand haben, können Sie die erste optionmit folgenden Zielen ausrichten:

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>
Erweitern Sie das Snippet

Kai Noack
quelle
4

Dies 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>
Erweitern Sie das Snippet

Rohan Parab
quelle
Dies ist der modernste (html5) Weg, um diese Anforderung zu erfüllen. Beachten Sie, dass hierfür die Schaltfläche type = submit erforderlich ist. Für eine type = -Schaltfläche mit einem Onclick-Submit-Handler muss der Benutzer nicht automatisch eine Auswahl treffen.
Arjan
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

In diesem Fall können Sie eine benutzerdefinierte Validierung vermeiden.

Fawaz
quelle
2

Nur eine kleine Bemerkung:

Einige Safari-Browser scheinen weder das Attribut "versteckt" noch die Stileinstellung "display: none" zu berücksichtigen (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 an. Es kann daher nützlich sein, immer einen erläuternden Text für diesen "Dummy" -Eintrag anzugeben:

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

Dank des Attributs "deaktiviert" wird es sowieso nicht aktiv ausgewählt.

Andreas Rozek
quelle
1

Ich verstehe, was Sie versuchen zu tun. Der beste und erfolgreichste Weg ist:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
Guryash Singh
quelle
1

Ich fand es wirklich interessant, weil ich vor nicht allzu langer Zeit das Gleiche erlebt habe. Ich bin jedoch im Internet auf ein Beispiel für die diesbezügliche Lösung gestoßen.

Siehe ohne weiteres das folgende Codefragment:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Damit bleibt es jederzeit nicht einreichbar, aber auswählbar. Mehr Komfort für die Benutzeroberfläche und ideal für die Benutzererfahrung.

Nun, das ist alles, ich hoffe es hilft. Prost!

farisfath25
quelle
Es erscheint überflüssig, es nicht einreichen zu lassen, aber den Benutzer auf das Dropdown aufmerksam zu machen, aber ich mag den Vorschlag
Iofacture
@lofacture: danke für die Eingabe. Eigentlich war der Code, den ich geschrieben habe, der, den ich wollte, aber ja, wie Sie sagten, es hängt von den Bedürfnissen des Benutzers / Besitzers ab
farisfath25
0

Es gibt keine HTML-Lösung. Nach der HTML 4.01-Spezifikation ist das Browserverhalten undefiniert, wenn keines der optionElemente das selectedAttribut hat. In der Praxis machen Browser die erste Option vorausgewählt.

Um dieses Problem zu umgehen, können Sie das selectElement durch eine Reihe von input type=radioElementen (mit demselben nameAttribut) ersetzen . Dadurch wird ein Steuerelement der gleichen Art mit unterschiedlichem Erscheinungsbild und unterschiedlicher Benutzeroberfläche erstellt. Wenn keines der input type=radioElemente das checkedAttribut hat, wird in den meisten modernen Browsern zunächst keines ausgewählt.

Jukka K. Korpela
quelle
0

Ich verwende das Laravel 5-Framework und die Antwort von @Gambi hat auch für mich funktioniert, aber mit einigen Änderungen für mein Projekt.

Ich habe die Optionswerte in einer Datenbanktabelle und verwende sie mit einer foreach-Anweisung. Aber vor der Anweisung habe ich eine Option mit @Gambit vorgeschlagenen Einstellungen hinzugefügt und es hat funktioniert.

Hier mein Beispiel:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Ich hoffe das hilft auch jemandem. Mach weiter so!

LOG Oracle
quelle
0

Versuche dies:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

Die erste Option in der Dropdown-Liste wäre leer.

Abhijit pai
quelle
0

Um anzuzeigen, wählen Sie bitte einen Wert in der Dropdown-Liste und blenden Sie ihn aus, nachdem ein Wert ausgewählt wurde. Bitte verwenden Sie den folgenden Code.

Es wird auch die erforderliche Validierung unterstützen.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
Erweitern Sie das Snippet

Bathri Nathan
quelle
0

Wenn Sie Angular (2+) (oder ein anderes Framework) verwenden, können Sie eine Logik hinzufügen. Die Logik wäre: Nur eine leere Option anzeigen, wenn der Benutzer noch keine andere ausgewählt hat. Nachdem der Benutzer eine Option ausgewählt hat, verschwindet die leere Option.

Für Angular (9) würde dies ungefähr so ​​aussehen:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
Mike de Klerk
quelle
-2

Versuche dies:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Validiert in HTML5. Funktioniert mit requiredAttributen im Auswahlelement. Kann erneut ausgewählt werden. Funktioniert in Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

Tristan Bailey
quelle