In diesem Lernprogramm wird das Verfahren zum Hinzufügen einer Option aus einem Eingabetext zu einem Auswahltag mithilfe von JavaScript definiert.
Wie füge ich eine Option zur Auswahl des Tags aus dem Eingabetext mit JavaScript hinzu?
Um mithilfe von JavaScript eine Option aus einem Eingabetext zu einem Auswahltag hinzuzufügen, können Sie verschiedene Methoden verwenden, z. B.:
Lassen Sie uns jede Methode einzeln untersuchen!
Methode 1: Fügen Sie eine Option hinzu, um das Tag aus dem Eingabetext auszuwählen, indem Sie die Methode add () mit dem Optionskonstruktor verwenden
Um eine Option aus dem Eingabetext in einem ausgewählten Tag hinzuzufügen, verwenden Sie das „ hinzufügen() ” Methode mit “ Möglichkeit ' Konstrukteur. Die Methode add() wird verwendet, um die Elemente zu den Optionen des „ HTMLSelectElement ” auch bekannt als
Syntax
Befolgen Sie die bereitgestellte Syntax, um die add()-Methode zum Hinzufügen einer Option in einem select-Tag zu verwenden:
hinzufügen ( Option, vorhandeneOption ) ;Hier die ' Möglichkeit “ stellt die neue Option dar, die anstelle von „ vorhandeneOption “.
Beispiel
Wir erstellen ein Eingabefeld, ein Dropdown-Menü mit
< ID auswählen = 'Optionen' >
< Optionswert = 'c' > C Möglichkeit >
auswählen >
< Br >< Br >
< Schaltflächen-ID = 'btn hinzufügen' anklicken = 'EinfügeOption()' > Option hinzufügen Taste >
Definieren Sie in der JS-Datei eine Funktion namens „ EinfügeOption() “ und greifen Sie dann auf die Schaltfläche, das Textfeld und das ausgewählte Element mit den ihnen zugewiesenen IDs zu, indem Sie „ querySelector() ' Methode. Erstellen Sie dann mit dem Option-Konstruktor eine Instanz der Option und rufen Sie die add()-Methode auf, indem Sie die vorhandene Option und die neue Option, die am Ende der Liste hinzugefügt werden muss, übergeben:
functioninsertOption ( ){
konst addBtn = dokumentieren. querySelector ( '#addbtn' ) ;
konst Listenfeld = dokumentieren. querySelector ( '#Optionen' ) ;
konst Dropdown-Liste = dokumentieren. querySelector ( '#txt' ) ;
konst Möglichkeit = Neu Möglichkeit ( Dropdown-Liste. Wert , Dropdown-Liste. Wert ) ;
Listenfeld. hinzufügen ( Option, undefiniert ) ;
Dropdown-Liste. Wert = '' ;
Dropdown-Liste. Fokus ( ) ;
}
Die Ausgabe zeigt, dass die neue Option aus dem Textfeld am Ende des Dropdown-Menüs hinzugefügt wird:
Notiz: Sie können diese Methode verwenden, um die Option am Anfang des select-Tags hinzuzufügen, indem Sie den Wert der vorhandenen Option als zweiten Parameter anstelle von undefined hinzufügen. Die neue Option wird vor der vorhandenen hinzugefügt.
Kommen wir zur anderen Methode!
Methode 2: Option hinzufügen, um Tag aus Eingabetext mit createElement() mit appendChild()-Methode auszuwählen
Es gibt einen anderen Ansatz, mit dem Sie ein neues Element erstellen können, indem Sie das „ createElement() “-Methode mit dem „ appendChild() ' Methode. Mit dieser Methodik fügen wir die Optionen am Anfang des select-Tags hinzu.
Syntax
Verwenden Sie die folgende Syntax zum Hinzufügen einer Option im select-Tag aus dem Eingabetext mit der Methode appendChild():
Kind anhängen ( neuerOptionswert ) ;Beispiel
Hier erstellen wir eine Dropdown-Liste, indem wir zwei Optionen hinzufügen: „ C ' und ' C++ “, ein Eingabefeld und eine Schaltfläche, die die benutzerdefinierte JavaScript-Funktion mit dem Namen „ EinfügeOption() “, wenn sein onclick-Ereignis ausgelöst wird:
< Eingabetyp = 'Text' Ich würde = 'txt' Platzhalter = 'Geben Sie Text ein, um die Option hinzuzufügen' >< ID auswählen = 'Dropdown-Liste' >
< Möglichkeit > C Möglichkeit >
< Möglichkeit > C ++ Möglichkeit >
auswählen >
< Br >< Br >
< Schaltfläche anklicken = 'EinfügeOption();' > Option hinzufügen Taste >
In einer Funktion namens „ EinfügeOption() “, greifen Sie zuerst auf das ausgewählte Element und das Textfeld mit den ihnen zugewiesenen IDs zu und rufen Sie dann die Methoden createElement() und createTextNode() auf, um eine Optionsinstanz zu erstellen und den Textwert als Option abzurufen. Rufen Sie danach die Methode appendChild() auf und übergeben Sie den Textwert als Option. Fügen Sie diese Option dann am Anfang der Auswahlliste mit ' einfügenBefore() ”-Methode mit select-Element:
functioninsertOption ( ){
var auswählen = dokumentieren. getElementById ( 'Dropdown-Liste' ) ,
TextWert = dokumentieren. getElementById ( 'txt' ) . Wert ,
neueOption = dokumentieren. createElement ( 'Möglichkeit' ) ,
neuerOptionswert = dokumentieren. createTextNode ( TextWert ) ;
neueOption. Kind anhängen ( neuerOptionswert ) ;
auswählen. Vorher einfügen ( neueOption, auswählen. erstes Kind ) ;
}
Wie Sie sehen können, zeigt die Ausgabe, dass die neue Option aus dem Textfeld am Anfang des Dropdown-Menüs hinzugefügt wird:
Wir haben alle möglichen Lösungen für das Hinzufügen von Optionen aus einem Eingabetext zum Select-Tag zusammengestellt.
Fazit
Um mithilfe von JavaScript eine Option aus einem Eingabetext zu einem Auswahltag hinzuzufügen, können Sie die integrierten JavaScript-Methoden verwenden, einschließlich der add()-Methode oder der appendChild()-Methode. Sie können Optionen in einem Auswahl-Tag am Anfang der Liste sowie am Ende der Liste hinzufügen. In diesem Tutorial haben wir das Verfahren zum Hinzufügen einer Option aus einem Eingabetext zu einem Auswahltag mithilfe von JavaScript mit detaillierten Beispielen definiert.