Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Create Dropdown List With Scrollbar

Post a Comment
I have a HTML drop down list with list of options. When user clicks on the dropdown list, first five options with scrollbar should be seen. I want to achieve this using JavaScript

Solution 1:

try this https://jsfiddle.net/Ltkpshm9/ example i have added to the jsfiddel or simply use,

<selectname="select1"onmousedown="if(this.options.length>5){this.size=5;}"onchange='this.size=0;'onblur="this.size=0;"><optionvalue="one">Option1</option><optionvalue="two">Option2</option><optionvalue="three">Option3</option><optionvalue="four">Option4</option><optionvalue="five">Option5</option><optionvalue="siz">Option6</option><optionvalue="seven">Option7</option><optionvalue="eight">Option8</option></select>

Solution 2:

You can do this with just using html and css. You need to create a div that will contain your button as well as the "dropdown" div with the linked list inside. On the actual css for the dropdown div, you should specify a max-height to adjust how many links you want to show, as well as overflow:auto to make it scroll-able. Including a screenshot of how it should look, and here is an example just using HTML and inline CSS:enter image description here

<!DOCTYPE html><html><head><styletype="text/css">.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    max-height: 200px;
    overflow: auto;
    box-shadow: 0px8px16px0pxrgba(0,0,0,0.2);
}

.dropdown-contenta {
    color: black;
    padding: 12px16px;
    text-decoration: none;
    display: block;
}

.dropdown-contenta:hover {background-color: #f1f1f1}

.dropdown:hover.dropdown-content {
    display: block;
}

.dropdown:hover.dropbtn {
    background-color: #3e8e41;
}
</style></head><body><divclass="dropdown"><buttonclass="dropbtn">Dropdown</button><divclass="dropdown-content"><ahref="#">Option 1</a><ahref="#">Option 2</a><ahref="#">Option 3</a><ahref="#">Option 4</a><ahref="#">Option 5</a><ahref="#">Option 6</a><ahref="#">Option 7</a><ahref="#">Option 8</a></div></div></body></html>

*Also I just realized that I created an example with links and yours uses the option element, but the same concept should apply. Just edit the css of the dropdown-content class to include option:

.dropdown-contenta, option {//same css here}

Post a Comment for "Create Dropdown List With Scrollbar"