javascript - 我可以控制有多少选项使选择标签变得可滚动吗？

Question

请看这两个<select>标签:

<select>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
</select>

<select>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  
</select>

如您所见，第一个不可滚动，但第二个可以。所以这意味着，如果我写很多 <option> <select> 中的属性标签，它将自动变为可滚动。

我正在尝试减少导致它可滚动的数字。例如，我想制作一个 <select>标签只有 7 个 <option>但显示有滚动条。是否可以？我可以用 JavaScript 配置它吗？

我测试过添加 <div>周边<select>标记为包装器并限制其 height , 但什么也没发生。

Answer 1

.holder{
  position:relative;
  height:20px;
}

select{
 
position:absolute;
z-index: 1;
}

<div class="holder">
  <select onfocus='this.size=5;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
</select>
  </div>


<h1>Random text</h1>

这不是一个直接的方法，但您可以设置大小 onfocus，一旦选择并失去焦点，再次将大小设置为 1。

查看我添加的代码，你只需要更新 onfocus='this.size=5;' 并设置你需要的大小。

更新:

Rory 在我之前没有想到的评论中提出了一个很好的观点。

This would affect the flow of the document as the increased height of the select would force following elements to adapt to its new dimensions

解决此问题的方法是使选择列表的位置 absolute 并添加 z-index 以便它覆盖其下方的元素。检查更新后的代码片段