Fügen Sie die Option hinzu, um das Tag mit JavaScript aus dem Eingabetxt auszuwählen

Während der Entwicklung einer Website kann das Auswahlelement dynamisch neue Optionen hinzufügen. In einer solchen Situation können Sie verschiedene JavaScript -Methoden verwenden, um Optionen zum Auswählen des Tags aus dem hinzugefügten Eingabetxt hinzuzufügen. Ich weiß nicht wie?

In diesem Tutorial wird das Prozedur definiert, um eine Option aus einem Eingabetxt zu einem Select -Tag mit JavaScript hinzuzufügen.

Fügen Sie die Option hinzu, um das Tag mit JavaScript aus dem Eingabetxt auszuwählen?

Um mit JavaScript eine Option aus einem Eingabetxt zu einem Auswahl -Tag hinzuzufügen, können Sie verschiedene Methoden verwenden, z. B.:

• add () Methode mit Optionskonstruktor
• createLement () -Methode mit appendChild () Methode

Erforschen wir jede Methode eins nach dem anderen!

Methode 1: Fügen Sie die Option hinzu, um das Tag mit Eingabetext mit add () Methode mit Optionskonstruktor auszuwählen

Verwenden Sie das Hinzufügen einer Option aus dem Eingabetxt in einem Select -Tag die “hinzufügen()”Methode mit“Möglichkeit" Konstrukteur. Die Methode add () wird verwendet, um die Elemente zu den Optionen der “hinzuzufügenHtmlSelectElement”Auch als Tag bekannt. Es dauert zwei Parameter als Argumente.

Syntax

Befolgen Sie die bereitgestellte Syntax, um die Methode add () zum Hinzufügen einer Option in einem Select -Tag zu verwenden:

add (Option, vorhandene Option);

Hier das "Möglichkeit"Repräsentiert die neue Option, die anstelle des" hinzugefügt wird "bestehende Option”.

Beispiel

Wir erstellen ein Eingabefeld, ein Dropdown-Menü mit der Verwendung Tag und eine Schaltfläche, mit der neue Optionen in einem Element ausgewählt werden können, wobei die “aufgerufen werdenInsertoption ()Funktionieren Sie, wenn es geklickt wird:

C




Option hinzufügen

Definieren Sie in der JS -Datei eine Funktion namens “Insertoption ()Und dann greifen Sie auf die Schaltfläche, das Textfeld und das Element aus, wobei die zugewiesenen IDs mit dem "QuerySelector ()" Methode. Erstellen Sie dann eine Instanz der Option mit dem Optionskonstruktor und rufen Sie die Methode add () auf, indem Sie die vorhandene Option und die neue Option übergeben, die am Ende der Liste hinzugefügt werden muss:

functionInsertoption ()

const addBtn = dokument.querySelector ('#addBtn');
const listbox = dokument.querySelector ('#option');
const Dropdown = Dokument.querySelector ('#txt');
const option = neue Option (Dropdown.Wert, Dropdown.Wert);
Listbox.add (option, undefiniert);
Dropdown-Liste.Value = ";
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 zweitem Parameter anstelle von undefiniert hinzufügen. Es fügt die neue Option vor dem vorhandenen hinzu.

Wechseln wir zur anderen Methode!

Methode 2: Fügen Sie die Option hinzu, um das Tag aus Eingabetext mit der Methode createLement () mit der Methode appendChild () auszuwählen

Es gibt einen weiteren Ansatz, bei dem Sie ein neues Element mit der “erstellen könnenCreateLement ()Methode mit der “appendChild ()" Methode. Durch die Verwendung dieser Methodik werden die Optionen am Anfang des Auswahl -Tags hinzugefügt.

Syntax

Verwenden Sie die folgende Syntax zum Hinzufügen der Option in der Auswahl von Tag im Eingabetxt mithilfe der Methode mit appendChild ():

appendChild (NewoptionValue);

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“ aufruft “Insertoption ()Wenn sein Onclick -Ereignis ausgelöst wird:

C
C++




Option hinzufügen

In einer Funktion namens “Insertoption ()Zuerst greifen Sie mit den zugewiesenen IDs auf das Element und das Textfeld aus und rufen Sie dann die Methoden createLement () und createTextNode () auf, um eine Optionsinstanz zu erstellen und den Textwert als Option abzurufen. Rufen Sie anschließend die Methode appendChild () an und übergeben Sie den Textwert als Option, fügen Sie diese Option zu Beginn der Auswahlliste mit „mit“ hinzuInsertBefore ()Methode mit Auswahlelement:

functionInsertoption ()

var select = dokument.GetElementById ("Dropdown"),
textValue = document.GetElementById ("txt").Wert,
newoption = document.CreateLement ("Option"),
newoptionValue = document.CreateTeXTNode (textValue);
Neuoption.appendChild (NewoptionValue);
wählen.vorab (Newoption, auswählen.erstes Kind);

Wie Sie sehen, dass die Ausgabe zeigt, dass die neue Option aus dem Textfeld am Anfang des Dropdown-Menüs hinzugefügt wird:

Wir haben alle möglichen Lösungen zum Hinzufügen von Optionen aus einem Eingabetxt zum Auswahl -Tag zusammengestellt.

Abschluss

Um mit JavaScript eine Option aus einem Eingabetxt zu einem Auswahl-Tag hinzuzufügen, können Sie die integrierten JavaScript-Methoden verwenden, einschließlich add () oder appendChild () -Methode. Sie können Optionen in einem Select -Tag am Anfang der Liste sowie zum Ende der Liste hinzufügen. In diesem Tutorial haben wir das Verfahren definiert, um eine Option aus einem Eingabetxt zu einem Select -Tag mit JavaScript mit detaillierten Beispielen hinzuzufügen.