Questo tutorial definirà la procedura per aggiungere un'opzione da un testo di input a un tag select utilizzando JavaScript.
Come aggiungere un'opzione per selezionare il tag dal testo di input utilizzando JavaScript?
Per aggiungere un'opzione da un testo di input a un tag selezionato utilizzando JavaScript, puoi utilizzare diversi metodi, come ad esempio:
Esploriamo ogni metodo uno per uno!
Metodo 1: aggiungi un'opzione per selezionare il tag dal testo di input utilizzando il metodo add() con il costruttore di opzioni
Per aggiungere un'opzione dal testo di input in un tag selezionato, utilizzare il ' Inserisci() ” metodo con “ Opzione Costruttore. Il metodo add() viene utilizzato per aggiungere gli elementi alle opzioni del ' HTMLSelectElement ” noto anche come tag
Sintassi
Segui la sintassi fornita per utilizzare il metodo add() per aggiungere un'opzione in un tag select:
Inserisci ( opzione, esistenteOpzione ) ;Qui, il “ opzione ” rappresenta la nuova opzione che verrà aggiunta al posto di “ opzione esistente ”.
Esempio
Creeremo un campo di input, utilizzando un menu a discesa
< seleziona id = 'opzioni' >
< valore dell'opzione = 'c' > C opzione >
Selezionare >
< fr >< fr >
< ID pulsante = 'aggiungi btn' al clic = 'insertOption()' > Aggiungi opzione pulsante >
Nel file JS, definisci una funzione denominata ' inserisciopzione() ” e quindi accedi al pulsante, alla casella di testo e all'elemento di selezione con gli ID assegnati utilizzando il pulsante “ querySelector() ' metodo. Quindi, crea un'istanza dell'opzione utilizzando il costruttore Option e chiama il metodo add() passando l'opzione esistente e la nuova opzione che deve essere aggiunta alla fine dell'elenco:
funzioneinserimentoOpzione ( ){
cost addBtn = documento. querySelector ( '#addbtn' ) ;
cost casella di riepilogo = documento. querySelector ( '#opzioni' ) ;
cost cadere in picchiata = documento. querySelector ( '#testo' ) ;
cost opzione = nuovo Opzione ( cadere in picchiata. valore , cadere in picchiata. valore ) ;
casella di riepilogo. Inserisci ( opzione, indefinito ) ;
cadere in picchiata. valore = '' ;
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 select 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: aggiungere l'opzione per selezionare il tag dal testo di input utilizzando createElement() con il metodo appendChild()
C'è un altro approccio con il quale puoi creare un nuovo elemento usando il ' creaElemento() ” metodo con il “ appendChild() ' metodo. Utilizzando questa metodologia, aggiungeremo le opzioni all'inizio del tag select.
Sintassi
Utilizzare la seguente sintassi per aggiungere l'opzione in select tag dal testo di input utilizzando 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 ' inserisciopzione() ” quando viene attivato il relativo evento onclick:
< tipo di ingresso = 'testo' id = 'testo' segnaposto = 'Inserisci testo per aggiungere l'opzione' >< seleziona id = 'cadere in picchiata' >
< opzione > C opzione >
< opzione > C ++ opzione >
Selezionare >
< fr >< fr >
< pulsante con un clic = 'insertOption();' > Aggiungi opzione pulsante >
In una funzione denominata ' inserisciopzione() ”, prima accedi all'elemento select e al campo di testo utilizzando gli ID assegnati, quindi chiama i metodi createElement() e createTextNode() per creare un'istanza di opzione e recupera il valore di testo come opzione. Dopodiché, chiama il metodo appendChild() e passa il valore del testo come opzione, quindi aggiungi questa opzione all'inizio dell'elenco di selezione usando ' inserisci prima () ” metodo con elemento select:
funzioneinserimentoOpzione ( ){
var selezionare = documento. getElementById ( 'cadere in picchiata' ) ,
valore di testo = documento. getElementById ( 'testo' ) . valore ,
nuova opzione = documento. createElement ( 'Opzione' ) ,
newOptionValue = documento. createTextNode ( valore di testo ) ;
nuova opzione. appendChild ( newOptionValue ) ;
Selezionare. inserire prima ( nuovaOpzione, seleziona. Primogenito ) ;
}
Come puoi vedere, 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 aggiungere opzioni da un testo di input al tag select.
Conclusione
Per aggiungere un'opzione da un testo di input a un tag select utilizzando JavaScript, puoi utilizzare i metodi incorporati di JavaScript, incluso il metodo add() o il metodo appendChild(). È possibile aggiungere opzioni in un tag select 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.