How to select multiple options at once in dropdown list in HTML5?
Dropdown lists are one of the most flexible elements in HTML. It is similar to that of the radio input, that is, only one item can be selected from a group of items by default. However, when the multiple attribute is used with the <select> element, we can enable the selection of multiple options from the list. The multiple attribute is a boolean attribute that specifies whether multiple options can be selected at once.
The process of selecting multiple options vary in different operating systems and browsers as mentioned below:
- Windows: We need to hold down the CTRL button to select multiple options.
- Mac: We need to hold down the command button to select multiple options.
Note that, because of the different ways of approaching this, and because one has to inform the user that multiple selections is available, it is more user-friendly to use checkboxes instead.
The below example demonstrates the use of the multiple attribute:
Example 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> |
Output:
Example 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> |
Output:
Please Login to comment...