Come aggiungere opzioni da selezionare con JavaScript

In JavaScript, di solito incontriamo una sfida in cui dobbiamo includere un elenco complesso in cui vogliamo aggiungere o modificare un'opzione nel caso di aggiornamenti o modifiche ai criteri. Inoltre, avere molte opzioni e una mancanza di gestione delle categorie può causare problemi negli scenari manuali. In questi scenari, i metodi JavaScript forniti per l'aggiunta di nuove opzioni possono salvarti.

Questo articolo guiderà sull'aggiunta di opzioni da selezionare con JavaScript.

Come aggiungere/inserire le opzioni da selezionare con JavaScript?

Possiamo aggiungere opzioni da selezionare con JavaScript utilizzando tre semplici metodi:

• "documento.createElement ()" metodo
• "JQuery" Biblioteca
• "Opzione()"Costruttore

Ora passeremo attraverso ciascuno degli approcci menzionati uno per uno!

Metodo 1: Aggiungi opzioni da selezionare con JavaScript utilizzando il documento.metodo createElement ()

IL "documento.createElement ()"Il metodo crea un nodo elemento. Puoi anche utilizzare questo metodo per creare un'opzione aggiuntiva nell'elenco delle opzioni esistenti. Questa funzionalità verrà raggiunta includendo un pulsante che aggiungerà l'opzione specificata all'elenco quando è cliccata.

Per l'aggiunta di opzioni da selezionare con JavaScript utilizzando il documento.Metodo createElement (), devi seguire la sintassi di seguito.

Sintassi

documento.CreateElement (tipo)

Qui, "tipo"Si riferisce al tipo di elemento che deve essere creato.

Guarda il seguente esempio per la comprensione del concetto dichiarato.

Esempio
Nell'esempio seguente, assegneremo un ID specifico, "aggiunte"E la dimensione"3", Che si riferisce alla dimensione del contenitore in cui vengono posizionate tre opzioni. Ora assegneremo i valori delle opzioni denominate "Pitone" E "Giava". Successivamente, aggiungi un pulsante con un "al clic"Evento. Funzionerà in modo tale che quando viene premuto il pulsante, la funzione "Addoptions ()"Verrà attivato:

Pitone
Giava

Aggiungi nuova opzione

Nel prossimo passaggio, definiremo la funzione "Addoptions ()"E accedere all'ID specificato di selezionare utilizzando il"documento.getElementById ()" metodo. Dopodiché, creeremo un "opzione"Elemento per l'aggiunta di un nuovo valore nell'elenco delle opzioni.

Infine, assegneremo un valore "JavaScript"All'opzione specifica e aggiungila all'elenco delle opzioni utilizzando"aggiungere()" metodo:

L'output dell'implementazione di cui sopra risulterà come segue:

Metodo 2: Aggiungi opzioni da selezionare con JavaScript utilizzando jQuery

"JQuery"È una libreria JavaScript essenziale che rende più semplice la programmazione JavaScript. Puoi utilizzare il suo "aggiungere()"Metodo per aggiungere un'opzione e assegnare un valore specifico a quella particolare opzione.

Passiamo attraverso il seguente esempio per la dimostrazione.

Esempio
Nello stesso file HTML, ora includeremo una libreria jQuery all'interno dell'HTML ""Tag:

Successivamente, applicheremo le funzionalità per l'aggiunta di un'opzione nell'elenco delle opzioni in una funzione denominata "Addoptions ()". Qui accederemo all'ID di selezione utilizzando "#Addoptions", Aggiungi una nuova opzione usando"aggiungere()Metodo "con l'aiuto di"Val ()" E "testo()"Metodi:

L'output risultante sarà:

Metodo 3: Aggiungi opzioni da selezionare con JavaScript utilizzando l'opzione ()

IL "Opzione()"Il costruttore crea un nuovo"Htmloptionelment". Può essere utilizzato per l'aggiunta di un nuovo slot per un'opzione aggiuntiva denominata "JavaScript".

Per l'aggiunta di opzioni da selezionare con JavaScript utilizzando il metodo del costruttore Opzione (), è necessario seguire la sintassi di seguito donati.

Sintassi

Nuova opzione (testo, valore)

Qui, "testo"Rappresenta il contenuto dell'elemento e"valore"Si riferisce al valore di htmloptionelment

Esempio
Ora utilizzeremo il "Addoptions ()"Funzione per ottenere l'ID selezionato con l'aiuto di"documento.getElementById ()" metodo. Quindi, chiama il "Opzione()"Costruttore e posizionare il valore dell'opzione"JavaScript" dentro. Dopodiché, il "appendChild ()"Il metodo aggiungerà il valore dell'opzione specificato alla fine dell'elenco:

Produzione

Abbiamo fornito metodi più semplici per l'aggiunta di opzioni da selezionare con JavaScript.

Conclusione

Per aggiungere opzioni da selezionare con JavaScript, è possibile utilizzare "documento.createElement ()"Metodo per la creazione di un elemento di opzione e includere il valore dell'opzione specificato in esso o il"JQuery"Biblioteca o il"Opzione()"Metodo del costruttore per l'aggiunta di un nuovo slot per un'opzione aggiuntiva e l'avvio del suo valore nell'elenco delle opzioni. Questo articolo ti ha guidato sull'aggiunta di opzioni da selezionare con JavaScript.