Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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:


My Personal Notes arrow_drop_up
Last Updated : 24 Aug, 2020
Like Article
Save Article
Similar Reads
Related Tutorials