如何一次显示select元素的所有选项？

Question

我有一个选择元素。我需要一次显示所有选项而不会像这张图片

那样丢失

我怎么能用css做到这一点？

Answer 1

理想情况下，如果您找到了限制<select multiple> [...] </select>中可选项数量的方法，那么就可以解决问题，因为select multiple默认显示所有选项。

但是，我还没有找到办法在线完成此操作，因此我们必须以其他方式进行此操作。此元素具有size属性，该属性表示将显示的option个数。因此，如果您将此项设置为select中的项目数，系统会显示您的所有项目（只需记住在CSS代码中设置overflow: auto;以防止显示滚动条）。但是，如果项目数量未修复，则必须通过JavaScript更改size属性。以下是一些例子。

＆＃13;

＆＃13;

var dynamic = document.getElementById('dynamic');

dynamic.setAttribute('size', dynamic.childElementCount)

＆＃13;

.ns {
  overflow: auto;
}

＆＃13;

<p>Normal selection:</p>
<select size="5">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
<select>

<p>Selection without scrollbar:</p>
<select class="ns" size="5">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
<select>

<p>Dynamic size selection:</p>
<select class="ns" id="dynamic">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
<select>

＆＃13;

＆＃13;

＆＃13;

显然，您还可以将自己的样式添加到select元素和选项