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

Es gibt keine HTML-Lösung. Nach der Spezifikation von HTML 4.01 ist das Verhalten des Browsers undefiniert, wenn keine der option Elemente hat die selected Attribut, und in der Praxis wird in den Browsern die erste Option vorausgewählt.

Als Abhilfe können Sie die Datei select Element durch eine Reihe von input type=radio Elemente (mit demselben name Attribut). Dadurch wird ein gleichartiges Steuerelement erzeugt, das sich jedoch in Aussehen und Benutzeroberfläche unterscheidet. Wenn keines der input type=radio Elemente hat die checked Attribut wird in den meisten modernen Browsern zunächst keines von ihnen ausgewählt.

Answer 2

Für diejenigen, die <select multiple> (Combobox; kein Dropdown), das hat bei mir funktioniert:

<select size=1 disabled multiple>
  <option hidden selected></option>
  <option>My Option</option>
</select>

Answer 3

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

Für Angular (9) würde dies etwa so aussehen:

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

Answer 4

Um zu zeigen Bitte wählen Sie einen Wert im Dropdown-Menü und blenden Sie es aus, nachdem ein Wert ausgewählt wurde. Bitte verwenden Sie den folgenden Code.

wird sie 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>

Answer 5

Versuchen Sie 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.