javascript - 当只有一个选项时，显示选择列表中的所有选项不起作用

Question

我有一个网页，其中显示字符串列表(字符串是从 API 调用中获取的)。它们显示为选择/选项标签，我需要显示所有选项(它们不应该被隐藏)。为了使其成为可能，我在选择标记中指定了 size 属性。代码如下:

html:

<select size="2">
  <option value="1">1</option>
  <option value="2">2</option>
</select> 

CSS:

  select {
    overflow: auto;
    height: auto;
    background-color: #08112d;
    max-height: 300px;
  }
  option {
    font-size: 16px;
    color: #fff;
    padding: 1rem;
  }

example on fiddle which works

问题

如果列表中只有一个选项，则样式会被破坏，并且选择列表需要单击才能查看选项，这是我不想要的。如何解决？

example on fiddle which has broken styles

附注 我需要使用选择/选项标签，因为我需要它们的行为(例如可选择的选项以及使用向上箭头按钮 ⬆ 和向下箭头 ⬇ 选择选项的可能性)。所以我不能使用其他标签(除非您可以建议如何添加此类行为)。

Answer 1

我可以看到您损坏的示例的 HTML，如下所示:

<select size="1">
  <option value="1">1</option>
</select>

您可以尝试以下替代:

<select size="1" multiple>
  <option value="1">1</option>
</select>

如您所见in the following docs当使用多个时，它将大小设置为 4 个元素，但由于我们强制保留 1 个元素，所以它解决了问题