Come creare un elenco a discesa usando JavaScript?

HTML e CSS vengono utilizzati per creare splendide pagine Web, ma quando JavaScript viene utilizzato in combinazione, il risultato è assolutamente fenomenale. Una cosa davvero interessante di una pagina web sono le sue liste a discesa. Ora, ci sono molti framework disponibili su Internet che consentono all'utente di utilizzare elenchi a discesa pre-costruiti, ma conoscere i fondamenti sono importanti. Questo articolo dimostrerà come creare un elenco a discesa di base con l'aiuto di HTML, CSS e JavaScript.

Passaggio 1: impostare il documento HTML

Inizia creando un documento HTML e inserendo le seguenti righe all'interno del file HTML:

Scegli auto


Porsche
Mercedes
BMW
Audi
Bugatti

Spieghiamo cosa sta succedendo qui:

• Un genitore è creato con Id = "ddsection", Più tardi questo Div verrà utilizzato per allineare i suoi elementi figlio in linea con esso
• Viene creato un pulsante che chiama il Buttonclicked () Metodo su clic. Questo pulsante verrà utilizzato per mostrare l'elenco a discesa.
• Successivamente, un altro Div viene creato con l'ID "Carmakes", che sta per memorizzare un sacco di opzioni al suo interno. Questo div funzionerà come un contenitore per il Tag posizionati al suo interno.

L'esecuzione del documento HTML fornisce il seguente output al browser:

Poiché è visibile nell'output, gli elementi dell'elenco a discesa non sono nel punto corretto. Dovrebbero essere:

• Nascosto fino a quando il pulsante non viene cliccato
• In linea verticalmente con il pulsante poiché è un elenco "a discesa"

Quindi, aggiustiamolo nel passaggio successivo

Passaggio 2: fissare gli elementi dell'elenco a discesa con CSS

Per iniziare, impostare la proprietà di visualizzazione di Div (il cui ID è DDSECTION) "Inline-block", Imposta anche la sua posizione su "parente":

#ddection
Posizione: relativo;
display: blocco inline;

Successivamente, aggiungi un po 'di stile al pulsante:

#Button
imbottitura: 10px 30px;
Font-size: 15px;

Modellare il contenitore per gli elementi dell'elenco e impostare Schermo proprietà a "nessuno" in modo che sia nascosto all'inizio:

#Carmakes
visualizzazione: nessuno;
Min-Width: 185px;

E infine, modella gli elementi dell'elenco e imposta la proprietà del display su "nessuno", Quindi sono anche nascosti all'inizio:

#Carmakes a
blocco di visualizzazione;
Background-color: RGB (181, 196, 196);
imbottitura: 20px;
colore nero;
DECORAZIONE DEL TESTO: Nessuno;

Il codice CSS completo per questa dimostrazione:

#ddection
Posizione: relativo;
display: blocco inline;

#Button
imbottitura: 10px 30px;
Font-size: 15px;

#Carmakes
visualizzazione: nessuno;
Min-Width: 185px;

#Carmakes a
blocco di visualizzazione;
Background-color: RGB (181, 196, 196);
imbottitura: 20px;
colore nero;
DECORAZIONE DEL TESTO: Nessuno;

L'esecuzione dell'HTML ora creerà il seguente output sul browser:

Gli elementi dell'elenco sono ora nascosti, tutto ciò che è rimasto da fare è attivare la propria proprietà di visualizzazione al momento della pressione. Facciamolo nel prossimo passaggio.

Passaggio 3: altezza proprietà display con javascript

Nel file JavaScript, inizia creando la funzione Buttonclicked (), che verrà eseguito sulla pressione del pulsante:

Funzione ButtonClicked ()
// Prossime righe di codice appartengono qui

In questa funzione, ottieni il riferimento del div con ID "Carmakes" che è il contenitore per gli elementi dell'elenco come:

VAR Container = Document.getElementById ("Carmakes");

Dopo questo, usa il file contenitore variabile per mostrare e nascondere l'elenco a discesa con l'aiuto dell'istruzione IF-ELSE e la proprietà di visualizzazione di caremakes Div:

if (contenitore.stile.display === "Nessuno")
contenitore.stile.display = "blocco";
altro
contenitore.stile.display = "Nessuno";

Il codice JavaScript completo per questa dimostrazione è come:

Funzione ButtonClicked ()
VAR Container = Document.getElementById ("Carmakes");
if (contenitore.stile.display === "Nessuno")
contenitore.stile.display = "blocco";
altro
contenitore.stile.display = "Nessuno";

Dopo questo, esegui semplicemente il file HTML su un browser e fai clic sul pulsante per mostrare e nascondere l'elenco a discesa:

E l'elenco a discesa funziona perfettamente.

Conclusione

L'elenco a discesa può essere creato con una combinazione di HTML, CSS e JavaScript. Elenchi a discesa Aggiungi all'estetica della pagina Web. Per creare un elenco a discesa, creare gli elementi richiesti nel file HTML. Nel file CSS, modella gli elementi e nascondili usando il loro Schermo proprietà. Nel file JavaScript, attiva la proprietà Visualizza al clic del pulsante. In questo articolo, la creazione di un elenco a discesa è stata spiegata passo dopo passo.