standardmäßig Option als leer auswählen

Question

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

Ich kann das nicht verwenden,

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

Denn dafür muss ich eine Validierung durchführen, um die erste Option zu behandeln. Kann mir jemand helfen, dieses Ziel zu erreichen, ohne tatsächlich die erste Option als Teil des Select-Tags aufzunehmen?

Answer 1

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>

Answer 2

Nur eine kleine Anmerkung:

einige Safari-Browser scheinen weder das Attribut "hidden" noch die Stileinstellung "display:none" zu respektieren (getestet mit Safari 12.1 unter MacOS 10.12.6). Ohne einen expliziten Platzhaltertext zeigen diese Browser einfach eine leere erste Zeile in der Liste der Optionen an. Es kann daher sinnvoll sein, für diesen "Dummy"-Eintrag immer einen erklärenden Text anzugeben:

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

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

Answer 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 die benutzerdefinierte Validierung vermeiden.

Answer 4

Ich verstehe, was Sie versuchen zu tun, aber 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>

Answer 5

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

Sehen Sie sich ohne weiteres das folgende Codefragment an:

<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 sie nicht mehr übertragbar, kann aber jederzeit ausgewählt werden. Mehr Komfort für die Benutzerschnittstelle und großartig für die Benutzererfahrung.

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