How To Fix Number of Visible Items In Html Dropdown and Allow

Posted By Bajarangi soft , Posted On 10-10-2020

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.

Fix Number of Visible Items In Html Dropdown

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>

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>

Related Post

How To Make table based on the value of dropdown Menu In JS
What Is Clearfix In Css Examples
How To use Bootstrap-Select For Dropdown
How To Add Images Into Dropdown List For Each Items
How To Clear Previous Appended Data On Change The Dropdown
How To Fix Number of Visible Items In Html Dropdown and Allow
How To Design Full Width dropdown Navbar Using Bootstrap
How To Change Dropdown Menu When Time Is Changed
How To Avoid Dropdown Menu To Close Menu Items On Clicking Inside
How To Use CSS Overflow Visible Property For Div Element
How To Set P Elements With CSS Layout Clearfix Property