Html Select 标签中的多行选项是否可行？答案

【问题标题】：Are Multi-line Options in Html Select Tags Possible?Html Select 标签中的多行选项是否可行？
【发布时间】：2009-07-22 13:44:05
【问题描述】：

是否可以（仅使用 HTML）显示 select 和 options，每行跨越多行？

【问题讨论】：

我认为只使用select 和选项tags 是不可能的
这能回答你的问题吗？ Line Break in HTML Select Option?

标签： html html-select

【解决方案1】：

无法使用 html 选择控件。

您可以使用 div 来充当下拉列表，使用 JavaScript 和 css。

【讨论】：

如果你想从数据库中构建你的列表，下拉菜单似乎不是一个解决方案。

【解决方案2】：

这不仅在标准 html 上是不可能的，而且它（作为一个对象）会变得与 IOS 设备处理 option 标签 的方式不兼容，即显示滚动列表，因此希望 option 标签 以这种方式运行甚至是不合理的，因为它会严重且意外地破坏跨设备兼容性。

正如其他人已经回答的那样（我还没有足够的声誉来支持或评论）已经说过，它必须使用 css/div 样式等来完成，这样在每个 选项标签以及（通过 css 样式）对移动设备友好。

【讨论】：

【解决方案3】：

如果您的案例是围绕 iOS 截断长选项文本，那么 How to fix truncated text on <select> element on iOS7 的解决方案可以提供帮助。

在选择列表的末尾添加一个空的 optgroup：

你可以这样实现：

<select>
  <option selected="" disabled="">option first</option>
  <option>another option that is really long and will probably be truncated on a mobile device</option>
  ...
  <optgroup label=""></optgroup>
</select>

【讨论】：

【解决方案4】：

由于 select 元素的呈现取决于用户代理，恐怕你不能拥有它，除非某些 UA 实际实现它。但是select 作为 ListBox 或 ComboBox 从来没有真正需要跨越多行的项目。此外，这会极大地混淆用户，因为他们习惯于一行 = 一项。

【讨论】：

【解决方案5】：

没有。

不过，您可以使用单选按钮，它们的 <label>s 可以自动换行。

【讨论】：

【解决方案6】：

可以通过在 HTML 元素上使用一些带有 CSS 样式的 JavaScript，使用 Dojo Toolkit 之类的框架轻松完成。否则，请使用 Radio 或 Checkbox 控件。

【讨论】：

【解决方案7】：

如果您有很多选择并因此寻找多线可能性，那么还有另一个技巧可能会有所帮助。不要使用 select 和 option 标签，而是使用 datalist 和 option 标签。这样，用户可以在选择区域内搜索他们的选项。




<input list="stocks" name="stockArea" placeholder="hello">
<label for="stockArea">Select Your Stock</label>
<datalist id="stocks">
  <option value="Microsoft" >
  <option value="Lenovo">
  <option value="Apple">
  <option value="Twitter">
  <option value="Amazon">
</datalist>

【讨论】：

【解决方案8】：

怎么样：

<!DOCTYPE html>
<html>
<body>

<select size="13" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

我不知道这是否是您想要的，但也许它可以帮助您。

如果要选择多个选项，则必须按住 Ctrl 键并单击以选择更多选项。

如果要禁用多选，只需从 SELECT 标记中删除“multiple”参数即可。

【讨论】：

NOT 多选，正如他在问题中所说，他正在寻找多行内容。
是的，我提供了额外的信息。它由“size”属性给出的多行。我说：“如果你想禁用 de multiselect，只需从 SELECT 标签中删除“multiple”参数。”
这个（重复的）问题很好地说明了所问的问题：stackoverflow.com/questions/15368502/…