HTML Auswahl wählt automatisch ersten Eintrag

Question

Ich habe den folgenden Code:

<select #typ class="input" (change)="changeIndex(typ.value)"> 
     <option *ngFor="let creation of creationComponent>{{creation.name}}</option> 
    </select> 

Wenn ich die Anwendung die Auswahl starten die erste Option automatisch ausgewählt hat. Aber das will ich nicht. Warum ist das und wie kann ich es beheben?

Answer 1

eine bessere Antwort hier gefunden: https://stackoverflow.com/a/13492609/5039495

Wir verwenden selected, disabled und hidden auf der Standard-Option, das ist von Safari anerkannt.

<select> 
 
    <option selected disabled hidden></option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select>

---

Veraltete

Der Trick ist, mit display:none eine leere Option einstellen.

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

Warnung: Wie von anderen Benutzern gemeldet, diese Lösung funktioniert nicht in Safari und iOS Safari

Answer 2

Dies ist eine gemeinsame Sache ... Fügen Sie einfach eine leere <option> als erstes:

<select #typ class="input" (change)="changeIndex(typ.value)"> 
    <option></option> 
    <option *ngFor="let creation of creationComponent>{{creation.name}}</option> 
</select> 

Sie nichts nicht ausgewählten einen <select> Tag haben kann. Dies sollte es beheben. Zitieren von Turnipcomment: Eine Auswahl muss eine ausgewählte Option haben. Wenn Sie mit dem ausgewählten Attribut nicht explizit eines festlegen, wird das erste verwendet. Für eine bessere Version können Sie den folgenden Code mit selected Attribute verwenden:

<select #typ class="input" (change)="changeIndex(typ.value)"> 
    <option selected="selected" value=""></option> 
    <option *ngFor="let creation of creationComponent>{{creation.name}}</option> 
</select>