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:
