Question

有没有办法在<option>元素中包含多行？

像这样：

 -------------------------
| Normal <option> element |
 -------------------------
| <option> element broken |
| onto two lines          |
 -------------------------
| Normal <option> element |
 -------------------------

是否有HTML / CSS方法，或者我应该使用JavaScript吗？

Answer 1

这可能不是你想要的，但你可以每个选项获得两行，使用“optgroup”标签，例如：

<select>
  <optgroup label="Click below for 'yes'">
    <option value="yes">Yes</option>
  </optgroup>
  <optgroup label="Click below for 'No'">
    <option value="no">No</option>
  </optgroup>
</select>

Answer 2

这是在<option></option>元素中显示HTML标记的特殊情况。据我所知，浏览器在这方面的表现非常不同（Firefox显示图像，其他浏览器忽略大多数或所有标签），并且没有跨浏览器解决方案。您可能需要使用JavaScript和不同的标记来模拟它。

在http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html他们说：

允许的内容：正常的字符数据

...在http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data

定义

与往常一样，规范很难理解，但据我所知，您无法插入文字<（即<br>等HTML标记）。我无法找到用空格定义行为的位置，但大多数浏览器似乎都会将其折叠。

Answer 3

select的问题在于它们是OS表单元素而不是Web表单元素。这就是为什么不可能在某些浏览器中设置样式（咳嗽...... IE6 ），这与其他输入不同。你有没有看到这方面的例子？由于操作系统不适应这种情况，浏览器也不会。

我还要指出它不是非常用户友好。用户习惯于在单行上包含选项的选择框。如果你开始将它们放在多行上，那么你就会违背选择框的可用性和固有的可访问性。采取这条路线可能不是一个好主意。

只是我的意见，但希望它有意义。

Answer 4

我不敢。浏览器似乎忽略了<br>元素中的换行符和HTML <option>标记，我认为JavaScript不提供任何方法来操纵此文本的显示方式。

Answer 5

不，你必须为这样的事情建立自定义下拉列表。

jQuery提供了很多这些;您可以使用CSS来定义height以获得满足您需要的特定选项。

你能在<option>元素中有多行吗？</option>

5 个答案: