Come creare un menu a discesa con JavaScript
Molti sviluppatori si affidano a bootstrap per questi scopi in quanto viene fornito con componenti incorporati che possono essere riutilizzati facilmente e aumentare la produttività di uno sviluppatore, ma capire come ogni cosa funziona per prima. Qui in questo articolo discuteremo di come creare un menu a discesa Usando JavaScript.
Menu a discesa con JavaScript
Tutti abbiamo visto menu a discesa e li abbiamo usati mentre riempivamo vari moduli online per la selezione di una particolare città, stato o semplicemente scegliendo da un mucchio di opzioni a discesa fornite.
Questi sono menu altergiabili costituiti da più opzioni da cui l'utente può scegliere una particolare opzione. Queste opzioni possono essere definite nell'elenco HTML o in JavaScript come array e sono associate a una funzione. Ogni volta che un utente fa clic su un'opzione, la funzione viene attivata e si verifica un'azione corrispondente.
Punti importanti per la creazione di un menu a discesa
È possibile creare un semplice menu a discesa con l'uso di un elenco HTML che utilizza il tag insieme al etichetta. Un ID viene fornito all'elenco utilizzato in JavaScript per ottenere l'opzione selezionata dall'utente.
È possibile creare un menu a discesa più complesso utilizzando principalmente JavaScript con un po 'di HTML. Le opzioni saranno definite come un array in JavaScript.
Comprendiamo ognuno di questi meglio con il codice per una migliore comprensione.
Semplice menu a discesa
Innanzitutto, crea un elenco in HTML che fornisce un po 'di ID in un tag modulo, qui forniamo "opzione" come ID.
Le opzioni sono definite in ogni tag e su modifica viene chiamata una funzione.
La funzione è definita in JavaScript con il nome "DropdownMenu ()" che innesca ogni volta che l'opzione viene selezionata.
L'ultima cosa è che un input viene creato con ID "Città" in cui l'opzione appare selezionata dall'utente.
Produzione:
Menu a discesa usando Div insieme a JavaScript
Innanzitutto, crea due div nel tag HTML che innesca la funzione e visualizza il menu sullo schermo.
Definisci l'elenco come un array in JavaScript e usa Docurnet.Metodo createElement () per creare un elenco a discesa programmaticamente in JavaScript
Quindi chiama il metodo AppendChild () per aggiungere il menu a discesa alla fine dell'elenco.
Produzione:
Conclusione
JavaScript viene utilizzato per la creazione di vari elementi interattivi sulla pagina web per aumentare il comportamento dinamico della pagina. In questo articolo abbiamo creato un menu a discesa in JavaScript con il codice. In primo luogo, è stato creato un semplice menu a discesa utilizzando HTML e la funzione che veniva chiamata tramite JavaScript, quindi l'abbiamo resa complessa e abbiamo creato il menu a discesa con JavaScript e un po 'di HTML. Gli elementi sono stati definiti come un array e un menu a discesa è stato creato utilizzando metodi integrati. Il codice è fornito sia per la tua migliore comprensione.