css - 如何一次显示选择元素的所有选项？

Question

我有一个选择元素。我需要一次显示所有选项，而不是像这张图片那样丢弃

我如何使用 css 做到这一点？

Answer 1

理想情况下，如果您找到一种方法来限制 <select multiple> [...] </select> 中的可选元素数量，这将解决问题，因为 select multiple默认显示所有选项。

但是，我一直无法找到在线执行此操作的方法，因此我们将不得不以其他方式执行此操作。这个元素有一个 size属性，表示 option 的数量这将被显示。因此，如果您将其设置为 select 中的元素数，您将看到所有元素(请记住在您的 CSS 代码中设置 overflow: auto; 以防止显示滚动条)。但是，如果元素数量不固定，则必须更改 size通过 JavaScript 属性。以下是一些示例。

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

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

.ns {
  overflow: auto;
}

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

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