create dropdown list with scrollbar

Question

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 and CSS. As I'm new to these, please suggest how I can show the dropdown list with scrollbar so that can able to scroll and select an option from the dropdown list. Below is my HTML code:

<html>
<body>
<select>
      <option value="one">Option1</option>
      <option value="two">Option2</option>
      <option value="three">Option3</option>
      <option value="four">Option4</option>
      <option value="five">Option5</option>
      <option value="siz">Option6</option>
      <option value="seven">Option7</option>
      <option value="eight">Option8</option>
    </select>
</body>
</html>

With the above html code, when the user click on the dropdown list, all options are seen without scrollbar.I want to show first five options with scrollbar.

http://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dropdown — jeff carey, Sep 13 '16 at 00:53
I tried those tricks from the above said URL, but it is crashing in IE11. It says "Internet Explorer has stopped working" close the program. @jeffcarey — Rij, Sep 13 '16 at 01:01

Lasith · Answer 1 · 2016-09-13T04:42:38.180

3

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

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

edited Sep 13 '16 at 04:42

answered Sep 13 '16 at 01:30

Lasith

565
1
6
17

I kept the code in separate text file and saved with .html extension. When i opened in browser, it shows a blank page. Do i need to add any onload function.Please suggest. I kept javascript code in – Rij Sep 13 '16 at 02:15
there is no any onload functions. it should work as in the example. otherwise you can use my last answer to this issue. its very easy and working perfect for me. – Lasith Sep 13 '16 at 03:18
I was talking about your last answer only https://jsfiddle.net/Ltkpshm9/ .I kept document.getElementById('sel').addEventListener in window.onload = function() { ..} then it worked in my local. But issue is first time it is showing all options without scrollbar when i first clicked on the dropdown list. why is this simple dropdown list with dynamic scrollbar such a big issue?i wil update you within couple of hours about its behaviour.@Lasith – Rij Sep 13 '16 at 04:16
i already tried that answer which you posted now, but that is not working in IE11. When you execute that piece of code in IE11 and select an option from dropdown list, it shows the dialogue box which says "internet explorer stopped working".I think onchange is the one which is breaking in IE11,but i am not sure..@Lasith – Rij Sep 13 '16 at 04:56

Devon Norris · Answer 2 · 2016-09-13T01:35:17.840

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>
<style type="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: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
    <a href="#">Option 4</a>
    <a href="#">Option 5</a>
    <a href="#">Option 6</a>
    <a href="#">Option 7</a>
    <a href="#">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-content a, option {//same css here}

The answer from Lasith is probably the simplest way with a clickable drop down using javascript. But I can reformat my way with your option elements included if you would like — Devon Norris, Sep 13 '16 at 01:56
The solution from Lasith does not work in IE11. I want the code to work in all browsers. In IE11 it shows a dialogue box with message "Internet Explorer stopped working" when we select the option from the list. — Rij, Sep 13 '16 at 02:04
The Lasith solution is good https://jsfiddle.net/Ltkpshm9/ , but when i tried the same code in my local by placing the code in text file with javascipt code in — Rij, Sep 13 '16 at 02:29
You need to put css code in style tags in your head: or link to an external css file. The "Simple scenario" that Lasith used just inlines the javascript code directly into the html tag, so no — Devon Norris, Sep 13 '16 at 07:23

create dropdown list with scrollbar

2 Answers2

Linked