Open In App

How to fix number of visible items in HTML dropdown and allow multiple selections ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 24 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads