Question

我有一个HTML下拉列表，其中包含选项列表。当用户单击下拉列表时，应该看到前滚动条的前五个选项。我想用JavaScript和CSS实现这一点。由于我是这些新手，请建议我如何使用滚动条显示下拉列表，以便能够滚动并从下拉列表中选择一个选项。以下是我的HTML代码：

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

使用上面的html代码，当用户点击下拉列表时，所有选项都看不到滚动条。我想用滚动条显示前五个选项。

Answer 1

试试我添加到jsfiddel的{{3}}示例或者只是使用，

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

Answer 2

只需使用html和css即可完成此操作。您需要创建一个包含按钮的div以及包含内部链接列表的“下拉列表”div。在下拉div的实际css中，您应指定max-height来调整要显示的链接数，以及overflow：auto以使其可滚动。包括它应该如何显示的屏幕截图，这里只是使用HTML和内联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>

*我还意识到我创建了一个带链接的示例，而您的使用了option元素，但应该应用相同的概念。只需编辑dropdown-content类的css即可包含选项：

.dropdown-content a, option {//same css here}

Answer 3

实现此目的的简单方案

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

使用滚动条

3 个答案: