How to fix number of visible items in HTML dropdown and allow multiple selections ?
Drop down menu provides a list of options to choose from. The HTML <select> tag is used to create a drop down list.
When the number of options in a drop-down list is large, fixing the number of visible items may be useful. This can be done by using the “size” attribute of <select> tag.
In the following example, 2 items are visible at a time because the value of the size attribute is set to 2.
Example 1:
<!DOCTYPE html> <html> <body> Choose a language:<br> <select id="language" size="2" > <option value="C">C</option> <option value="C++">C++</option> <option value="Java">Java</option> <option value="Python">Python</option> <option value="R">R</option> <option value="HTML">HTML</option> <option value="JavaScript">JavaScript</option> </select> </body> </html> |
Output:
In the above example, only one item can be selected from the list. To enable multiple selections, a “multiple” attribute is used. In the following example, multiple options can be selected by holding the Ctrl button (Windows) or Command (Mac):
Example 2:
<!DOCTYPE html> <html> <body> Choose a language:<br> <select id="language" size="4" multiple> <option value="C">C</option> <option value="C++">C++</option> <option value="Java">Java</option> <option value="Python">Python</option> <option value="R">R</option> <option value="HTML">HTML</option> <option value="JavaScript">JavaScript</option> </select> <p> Hold ctrl (windows) or Command (Mac) to select multiple option </p> </body> </html> |
Output:
Please Login to comment...