我有一个显示字符串列表的网页(字符串是从API调用中获取的).它们显示为 Select /选项标签,我需要显示所有选项(它们不应被隐藏).为了实现这一点,我在 Select 标记中指定了size个属性.代码如下:

Html:

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

另请参阅以下内容:

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

example on fiddle which works

enter image description here

The problem

如果列表中只有一个选项,那么样式就会被 destruct , Select 列表需要点击才能看到选项,这是我不想要的.如何修复它?

example on fiddle which has broken styles

enter image description here

P.S.个 我需要使用SELECT/OPTIONS标记,因为我需要它们的行为(比如可选选项,以及使用向上箭头按钮⬆和向下箭头⬇ Select 选项的可能性).所以我不能使用其他标签(除非你能建议如何添加这样的行为).

推荐答案

我可以看到您的错误示例的HTML,它如下所示:

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

你能试试下面的instead条吗:

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

正如您可以看到的,当使用多个元素时,它将大小设置为4个元素,但由于我们强制保留1,所以它修复了问题

Javascript相关问答推荐

vscode扩展-webView Panel按钮不起任何作用

无法在nextjs应用程序中通过id从mongoDB删除'

如何粗体匹配的字母时输入搜索框使用javascript?

jQuery s data()[storage object]在vanilla JavaScript中?'

当点击注册页面上的注册按钮时,邮箱重复

使用Java脚本根据按下的按钮更改S文本

正则表达式,允许我匹配除已定义的子字符串之外的所有内容

如何在Node.js中排除导出的JS文件

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

如何在Java脚本中对列表中的特定元素进行排序?

将范围 Select 器添加到HighChart面积图

将相关数据组合到两个不同的数组中

P5.js中矩形内的圆弧

ComponentWillReceiveProps仍在React 18.2.0中工作

如何使pdf.js上的文本呈现为可选?

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0

如何判断字符串是否只包含特定字符串

如何在Flat Pickr中更改取消选中日期的 colored颜色

为什么我的AJAX联系人表单不能留在同一页上?