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;'并设置所需的大小。

更新

罗里在评论中提出了一个很好的观点，我之前没想过。

这会影响文档的流量，因为增加了高度选择将迫使以下元素适应其新的尺寸

解决这个问题的方法是选择列表的位置absolute并添加z-index，以便它覆盖在其下方的元素。查看更新的代码段

Answer 2

在select

上使用onfocus属性

onfocus='this.size=;'

调整选择的高度。示例

onfocus='this.size=10;'

这里10表示没有选项，如果this.size = 10，那么如果select中有10个以上的选项，将自动添加滚动。

Answer 3

不是确切的解决方案，但类似的东西是属性大小=“5”

<select size="5">
  <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>

我可以控制选择标签变为可滚动的选项数量吗？

3 个答案: