javascript-我可以控制多少个选项使选择标签变为可滚动状态？

请看一下这两个< 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>标签作为包装材料并限制其高度,但没有任何反应.

解决方法:

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

这不是一种直接的方法,但是您可以将焦点设置为大小,一旦选择并失去焦点,就可以再次将大小设置为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

一种解决方法是将选择列表的位置设为绝对,并添加一个z-index,使其覆盖其下方的元素.检查更新的代码段