Deze zelfstudie definieert de procedure om een optie uit een invoertekst toe te voegen aan een geselecteerde tag met behulp van JavaScript.
Hoe een optie toevoegen om tag te selecteren uit invoertekst met JavaScript?
Om een optie uit een invoertekst toe te voegen aan een geselecteerde tag met behulp van JavaScript, kunt u verschillende methoden gebruiken, zoals:
Laten we elke methode een voor een bekijken!
Methode 1: Optie toevoegen om tag uit invoertekst te selecteren met behulp van add()-methode met Option Constructor
Gebruik voor het toevoegen van een optie uit de invoertekst in een select-tag de ' toevoegen() ” methode met “ Keuze ” Constructeur. De methode add() wordt gebruikt om de elementen toe te voegen aan de opties van de “ HTMLSelectElement ” ook bekend als
Syntaxis
Volg de meegeleverde syntaxis om de methode add() te gebruiken voor het toevoegen van een optie in een select-tag:
toevoegen ( optie, bestaandeOptie ) ;Hier de ' keuze ” staat voor de nieuwe optie die zal worden toegevoegd in plaats van de “ bestaandeOptie ”.
Voorbeeld
We zullen een invoerveld maken, een vervolgkeuzemenu met behulp van tag en een knop die nieuwe opties toevoegt aan een select element, waarbij de ' insertOption() ” functie wanneer erop wordt geklikt:
< invoertype: = 'tekst' ID kaart = 'tekst' tijdelijke aanduiding = 'Voer tekst in om optie toe te voegen' >< selecteer id = 'opties' >
< Optie waarde = 'c' > C keuze >
selecteer >
< br >< br >
< knop id = 'voeg btn toe' bij klikken = 'insertOption()' > Optie toevoegen knop >
Definieer in het JS-bestand een functie met de naam ' insertOption() ' en ga vervolgens naar de knop, het tekstvak en het select-element met hun toegewezen id's met behulp van de ' querySelector() ” methode. Maak vervolgens een instantie van de optie met behulp van de Option-constructor en roep de methode add() aan door de bestaande optie en de nieuwe optie die aan het einde van de lijst moet worden toegevoegd, door te geven:
functieinsertOption ( ){
const addBtn = document. querySelector ( '#addbtn' ) ;
const keuzelijst = document. querySelector ( '#opties' ) ;
const laten vallen = document. querySelector ( '#tekst' ) ;
const keuze = nieuwe Keuze ( laten vallen. waarde , laten vallen. waarde ) ;
keuzelijst. toevoegen ( optie, niet gedefinieerd ) ;
laten vallen. waarde = '' ;
laten vallen. focus ( ) ;
}
De uitvoer laat zien dat de nieuwe optie uit het tekstveld is toegevoegd aan het einde van het vervolgkeuzemenu:
Opmerking: U kunt deze methode gebruiken om de optie aan het begin van de select-tag toe te voegen door de waarde van de bestaande optie als tweede parameter toe te voegen in plaats van undefined. Het voegt de nieuwe optie toe voor de bestaande.
Laten we naar de andere methode gaan!
Methode 2: Optie toevoegen om tag uit invoertekst te selecteren met behulp van createElement() With appendChild() Method
Er is een andere benadering waarmee u een nieuw element kunt maken met behulp van de ' createElement() ” methode met de “ appendChild() ” methode. Door deze methode te gebruiken, zullen we de opties aan het begin van de select-tag toevoegen.
Syntaxis
Gebruik de volgende syntaxis voor het toevoegen van een optie in de select-tag van de invoertekst met behulp van de appendChild()-methode:
appendKind ( nieuweOptieWaarde ) ;Voorbeeld
Hier zullen we een vervolgkeuzelijst maken door twee opties toe te voegen ' C ' en ' C++ ”, een invoerveld en een knop die de door de gebruiker gedefinieerde JavaScript-functie genaamd “ insertOption() ” wanneer de onclick-gebeurtenis wordt geactiveerd:
< invoertype: = 'tekst' ID kaart = 'tekst' tijdelijke aanduiding = 'Voer tekst in om optie toe te voegen' >< selecteer id = 'laten vallen' >
< keuze > C keuze >
< keuze > C ++ keuze >
selecteer >
< br >< br >
< knop onclick = 'insertOption();' > Optie toevoegen knop >
In een functie genaamd ' insertOption() ', ga eerst naar het select-element en het tekstveld met behulp van hun toegewezen id's en roep vervolgens de methoden createElement() en createTextNode() aan voor het maken van een optie-instantie en haal de tekstwaarde op als een optie. Roep daarna de appendChild() -methode aan en geef de tekstwaarde door als een optie, voeg deze optie toe aan het begin van de selectielijst met ' invoegenVoor() ” methode met select element:
functieinsertOption ( ){
var selecteren = document. getElementById ( 'laten vallen' ) ,
tekstwaarde = document. getElementById ( 'tekst' ) . waarde ,
nieuweOptie = document. createElement ( 'Keuze' ) ,
nieuweOptieWaarde = document. createTextNode ( tekstwaarde ) ;
nieuweOptie. appendKind ( nieuweOptieWaarde ) ;
selecteer. invoegenVóór ( nieuweOptie, selecteer. eerstgeborene ) ;
}
Zoals je kunt zien, laat de uitvoer zien dat de nieuwe optie uit het tekstveld is toegevoegd aan het begin van het vervolgkeuzemenu:
We hebben alle mogelijke oplossingen verzameld voor het toevoegen van opties van een invoertekst aan de select-tag.
Conclusie
Om een optie uit een invoertekst toe te voegen aan een select-tag met behulp van JavaScript, kunt u de ingebouwde JavaScript-methoden gebruiken, waaronder de methode add() of appendChild(). U kunt opties toevoegen in een select-tag aan het begin van de lijst en aan het einde van de lijst. In deze zelfstudie hebben we de procedure gedefinieerd om een optie uit een invoertekst toe te voegen aan een geselecteerde tag met behulp van JavaScript met gedetailleerde voorbeelden.