Come aggiungere l'opzione per selezionare il tag dal testo di input usando JavaScript

Durante lo sviluppo di un sito Web, può esserci un requisito per aggiungere nuove opzioni all'elemento selezionato dinamicamente, il che diventa impegnativo per i principianti. In tale situazione, è possibile utilizzare diversi metodi JavaScript allo scopo di aggiungere opzioni al tag Seleziona dal testo di input aggiunto. Non so come?

Questo tutorial definirà la procedura per aggiungere un'opzione da un testo di input a un tag selezionato utilizzando JavaScript.

Come aggiungere l'opzione per selezionare il tag dal testo di input usando JavaScript?

Per aggiungere un'opzione da un testo di input a un tag selezionato utilizzando JavaScript, è possibile utilizzare metodi diversi, come ad esempio:

• Metodo ADD () con costruttore di opzioni
• metodo createElement () con appendChild ()

Esploriamo ogni metodo uno per uno!

Metodo 1: Aggiungi opzione per selezionare Tag dal testo di input usando il metodo Add () con costruttore di opzioni

Per l'aggiunta di un'opzione dal testo di input in un tag Select, utilizzare "aggiungere()Metodo "con"Opzione"Costruttore. Il metodo ADD () viene utilizzato per aggiungere gli elementi alle opzioni del "Htmlselectelement"Conosciuto anche come tag. Ci vogliono due parametri come argomenti.

Sintassi

Segui la sintassi fornita per utilizzare il metodo ADD () per l'aggiunta di un'opzione in un tag selezionato:

Aggiungi (opzione, esistente);

Qui, il "opzione"Rappresenta la nuova opzione che verrà aggiunta al posto di"esistente".

Esempio

Creeremo un campo di input, un menu a discesa utilizzando Tag e un pulsante che aggiungerà nuove opzioni in un elemento selezionato, invocando "insertoption ()"Funzione quando viene cliccata:

C




Aggiungi opzione

Nel file JS, definire una funzione denominata "insertoption ()"E quindi accedere al pulsante, alla casella di testo e all'elemento seleziona con l'ID assegnato utilizzando"QuerySelector ()" metodo. Quindi, crea un'istanza dell'opzione utilizzando il costruttore di opzioni e chiama il metodo ADD () passando l'opzione esistente e la nuova opzione che deve essere aggiunta alla fine dell'elenco:

functioninsertoption ()

const addBtn = documento.QuerySelector ('#addBtn');
const listBox = Document.QuerySelector ('#Options');
const dropdown = documento.QuerySelector ('#txt');
Opzione const = nuova opzione (discesa.Valore, discesa.valore);
Elencobox.Aggiungi (opzione, indefinita);
cadere in picchiata.value = ";
cadere in picchiata.messa a fuoco();

L'output mostra che la nuova opzione dal campo di testo viene aggiunta alla fine del menu a discesa:

Nota: È possibile utilizzare questo metodo per aggiungere l'opzione all'inizio del tag seleziona aggiungendo il valore dell'opzione esistente come secondo parametro anziché non definito. Aggiungerà la nuova opzione prima di quella esistente.

Passiamo all'altro metodo!

Metodo 2: Aggiungi opzione per selezionare Tag dal testo di input usando createElement () con appendChild ()

C'è un altro approccio usando il quale è possibile creare un nuovo elemento usando il "createElement ()Metodo "con il"appendChild ()" metodo. Usando questa metodologia, aggiungeremo le opzioni all'inizio del tag seleziona.

Sintassi

Utilizzare la seguente sintassi per l'aggiunta dell'opzione in Select Tag dal testo di input usando il metodo AppendChild ():

appendChild (newOptionValue);

Esempio

Qui creeremo un elenco a discesa aggiungendo due opzioni "C" E "C++", Un campo di input e un pulsante che chiamerà la funzione JavaScript definita dall'utente denominata"insertoption ()"Quando viene attivato il suo evento OnClick:

C
C++




Aggiungi opzione

In una funzione chiamata "insertoption ()", Accedi prima dell'elemento seleziona e il campo di testo utilizzando i loro ID assegnati e quindi, chiama i metodi createElement () e createTextNode () per la creazione di un'istanza di opzione e recuperare il valore di testo come opzione. Successivamente, chiama il metodo AppendChild () e passa il valore di testo come opzione quindi, aggiungi questa opzione all'inizio dell'elenco selezionati usando "insertBefore ()"Metodo con elemento selezionato:

functioninsertoption ()

var select = document.getElementById ("Dropdown"),
TextValue = Document.getElementById ("txt").valore,
newOption = document.CreateElement ("Opzione"),
newOptionValue = documento.createtextNode (textValue);
newoption.appendChild (newOptionValue);
Selezionare.InsertBefore (Newoption, Seleziona.Primogenito);

Come puoi vedere che l'output mostra che la nuova opzione dal campo di testo viene aggiunta all'inizio del menu a discesa:

Abbiamo compilato tutte le possibili soluzioni per l'aggiunta di opzioni da un testo di input al tag seleziona.

Conclusione

Per aggiungere un'opzione da un testo di input a un tag selezionato utilizzando JavaScript, è possibile utilizzare i metodi integrati JavaScript, incluso il metodo Add () o AppendChild (). È possibile aggiungere opzioni in un tag selezionato all'inizio dell'elenco e alla fine dell'elenco. In questo tutorial, abbiamo definito la procedura per aggiungere un'opzione da un testo di input a un tag selezionato utilizzando JavaScript con esempi dettagliati.