Cómo crear una lista desplegable usando JavaScript?

HTML y CSS se utilizan para crear páginas web impresionantes, pero cuando JavaScript se usa en combinación, el resultado es absolutamente fenomenal. Una cosa realmente genial de una página web son sus listas desplegables. Ahora, hay muchos marcos disponibles en Internet que permiten al usuario usar listas desplegables previas a la construcción, pero saber que los fundamentos son importantes. Este artículo demostrará cómo crear una lista desplegable básica con la ayuda de HTML, CSS y JavaScript.

Paso 1: Configure el documento HTML

Comience creando un documento HTML y colocando las siguientes líneas dentro del archivo HTML:

Elige el coche Make


Porsche
Mercedes
BMW
Audi
Bugatti

Expliquemos qué está pasando aquí:

• Un padre se crea con el id = "ddsection", Más tarde, este div se utilizará para alinear sus elementos infantiles en línea con eso
• Se crea un botón que llama al Buttonclicked () Método al hacer clic. Este botón se usará para mostrar la lista desplegable.
• Después de eso, se crea otro DIV con la identificación de "Carmakes", que almacenará un montón de opciones dentro de él. Este div funcionará como un contenedor para el Etiquetas colocadas dentro de él.

Ejecutar el documento HTML proporciona la siguiente salida al navegador:

Como es visible en la salida, los elementos de la lista desplegable no están en el lugar correcto. Ellos deberían ser:

• Oculto hasta que se haga clic en el botón
• Verticalmente en línea con el botón ya que es una lista de "desplegable"

Entonces, arreglemos eso en el siguiente paso

Paso 2: arreglar los elementos de la lista desplegable con CSS

Para comenzar, establezca la propiedad de visualización de DISCECTION) "Bloque en línea", también establece su posición en "relativo":

#ddsection
Posición: relativo;
Pantalla: bloque en línea;

Después de eso, agregue un poco de estilo al botón:

#botón
relleno: 10px 30px;
tamaño de fuente: 15px;

Estilizar el contenedor para los elementos de la lista y establecer su mostrar propiedad de "ninguno" para que esté oculto al principio:

#Carmakes
Pantalla: ninguno;
Min-Width: 185px;

Y finalmente, diseñe los elementos de la lista y configure su propiedad de visualización en "ninguno", Entonces también están ocultos al principio:

#carmakes a
bloqueo de pantalla;
Color de fondo: RGB (181, 196, 196);
relleno: 20px;
de color negro;
Decoración de texto: ninguna;

El código CSS completo para esta demostración:

#ddsection
Posición: relativo;
Pantalla: bloque en línea;

#botón
relleno: 10px 30px;
tamaño de fuente: 15px;

#Carmakes
Pantalla: ninguno;
Min-Width: 185px;

#carmakes a
bloqueo de pantalla;
Color de fondo: RGB (181, 196, 196);
relleno: 20px;
de color negro;
Decoración de texto: ninguna;

Ejecutar el HTML ahora creará la siguiente salida en el navegador:

Los elementos de la lista ahora están ocultos, todo lo que queda por hacer es alternar su propiedad de visualización sobre el botón. Hagamos eso en el siguiente paso.

Paso 3: Alternar la propiedad de visualización con JavaScript

En el archivo JavaScript, comience creando la función Buttonclicked (), que se ejecutará al presionar el botón:

función buttonclicked ()
// Las próximas líneas de código pertenecen aquí

En esta función, obtenga la referencia del DIV con ID "Carmakes", que es el contenedor de los elementos de la lista como:

contenedor var = documento.getElementById ("Carmakes");

Después de esto, use el envase variable para mostrar y ocultar la lista desplegable con la ayuda de la instrucción if-else y la propiedad de visualización de la careemakes Div:

if (contenedor.estilo.display === "Ninguno")
envase.estilo.display = "bloque";
demás
envase.estilo.display = "Ninguno";

El código completo de JavaScript para esta demostración es como:

función buttonclicked ()
contenedor var = documento.getElementById ("Carmakes");
if (contenedor.estilo.display === "Ninguno")
envase.estilo.display = "bloque";
demás
envase.estilo.display = "Ninguno";

Después de esto, simplemente ejecute el archivo HTML en un navegador y haga clic en el botón para mostrar y ocultar la lista desplegable:

Y la lista desplegable funciona perfectamente bien.

Conclusión

La lista desplegable se puede crear con una combinación de HTML, CSS y JavaScript. Listas desplegables Agregar a la estética de la página web. Para crear una lista desplegable, cree los elementos requeridos en el archivo HTML. En el archivo CSS, diseñe los elementos y escúrrelos usando su mostrar propiedad. En el archivo JavaScript, alterne la propiedad de visualización al hacer clic en el botón. En este artículo, la creación de una lista desplegable se explicó paso a paso.