javascript - create dropdown list with scrollbar - Stack Overflow|江阴雨辰互联

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.

<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.

Share Improve this question edited Sep 13, 2016 at 2:01 Nissa 4,7048 gold badges30 silver badges38 bronze badges asked Sep 13, 2016 at 0:49 Rij 992 gold badges4 silver badges12 bronze badges

stackoverflow./questions/8788245/… – jeff carey Commented Sep 13, 2016 at 0: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 Commented Sep 13, 2016 at 1:01

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

try this https://jsfiddle/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>

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}

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744222084a4563830.html

javascript - create dropdown list with scrollbar - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - create dropdown list with scrollbar - Stack Overflow

2 Answers 2

相关推荐