Las listas desplegables son uno de los elementos más flexibles en HTML. Es similar al de la entrada de radio, es decir, solo se puede seleccionar un elemento de un grupo de elementos por defecto. Sin embargo, cuando se usa el atributo múltiple con el elemento <select>, podemos habilitar la selección de múltiples opciones de la lista. El atributo múltiple es un atributo booleano que especifica si se pueden seleccionar varias opciones a la vez.
El proceso de selección de múltiples opciones varía en diferentes sistemas operativos y navegadores, como se menciona a continuación:
- Windows : Necesitamos mantener presionado el botón CTRL para seleccionar múltiples opciones.
- Mac : Necesitamos mantener presionado el botón de comando para seleccionar múltiples opciones.
Tenga en cuenta que, debido a las diferentes formas de abordar esto, y debido a que uno tiene que informar al usuario que hay múltiples selecciones disponibles, es más fácil usar casillas de verificación en su lugar.
El siguiente ejemplo demuestra el uso del atributo múltiple :
Ejemplo 1:
HTML
<html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <p> The below list does not allow multiple selection. </p> <form id="form1"> <select width=300 style="width: 350px"> <option value='blue'>Blue</option> <option value='green'>Green</option> <option value='red'>Red</option> <option value='yellow'>Yellow</option> <option value='' selected>Select a Color</option> </select> </form> <p> The below list does allows multiple selections. </p> <form id="form2"> <select width=300 style="width: 350px" size="8" multiple> <option value='blue'>Blue</option> <option value='green'>Green</option> <option value='red'>Red</option> <option value='yellow'>Yellow</option> <option value='orange'>Orange</option> </select> </form> </body> </html>
Producción:
Ejemplo 2:
<html> <body> <center> <h1 style="color:green; font-style:italic;"> Geeksforgeeks </h1> <h2 style="font-style:italic; color:green;"> HTML select multiple Attribute </h2> <form action=" "> <select name="Bikes" multiple> <option value="HeroHonda">HeroHonda</option> <option value="Splender">Splender</option> <option value="Ninja">Ninja</option> <option value="Pulsav">Pulsav</option> </select> <input type="submit"> </form> <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikhiltanna33 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA