Javascript <option> 元素中可以有多行吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4746824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you have multiple lines in an <option> element?
提问by Upvote
Is there a way to have multiple linesin an <option>element?
有没有办法在一个元素中有多行<option>？
Like this:
像这样：
-------------------------
| Normal <option> element |
-------------------------
| <option> element broken |
| onto two lines |
-------------------------
| Normal <option> element |
-------------------------
Is there any HTML/CSS approach, or should I use JavaScript?
是否有任何 HTML/CSS 方法，或者我应该使用 JavaScript？
采纳答案by álvaro González
It's a particular case of displaying HTML tags inside an <option></option>element. As far as I know, browsers behave very differently in this area (Firefox displays even images, other browsers ignore most or all tags) and there isn't a cross-browser solution. You'll probably need to emulate it with JavaScript and a different markup.
这是在<option></option>元素内显示 HTML 标签的特殊情况。据我所知，浏览器在这方面的表现非常不同（Firefox 甚至显示图像，其他浏览器忽略大部分或全部标签）并且没有跨浏览器的解决方案。您可能需要使用 JavaScript 和不同的标记来模拟它。
At http://www.w3.org/TR/2011/WD-html-markup-20110113/option.htmlthey say:
在http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html他们说：
Permitted contents: normal character data
允许内容：普通字符数据
... which is defined at http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
... 定义在http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
The spec is hard to understand, as usual, but I understand that you cannot insert a literal <(i.e., an HTML tag such as <br>). I cannot find where it defines the behaviour with blank space but most browsers appear to collapse it.
像往常一样，规范很难理解，但我知道您不能插入文字<（即，HTML 标记，例如<br>）。我找不到它用空格定义行为的地方，但大多数浏览器似乎都折叠了它。
回答by Neil
This may not be what you want, but you canget two lines per option, by using the "optgroup" tag e.g:
这可能不是您想要的，但是您可以通过使用“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>
回答by tadywankenobi
The problem with select's is that they are OS form elements as opposed to web form elements. That's why it's not possible to style them in some browsers (cough... IE6) unlike other inputs. Have you seen an example of this anywhere? As the operating system doesn't accommodate this, the browser won't either.
select 的问题在于它们是 OS 表单元素，而不是 Web 表单元素。这就是为什么与其他输入不同，无法在某些浏览器（咳... IE6）中设置样式的原因。你在任何地方见过这样的例子吗？由于操作系统不适应这一点，浏览器也不会。
I'd also point out that it's not very user friendly. Users are used to the idea of a select box containing options on single lines. If you start to put them on multiple lines, you are going against the grain of the select box's usability and inherent accessibility. It might not be such a good idea to take this route.
我还要指出它不是很用户友好。用户习惯于包含单行选项的选择框的想法。如果你开始将它们放在多行上，你就会违背选择框的可用性和固有的可访问性。走这条路可能不是一个好主意。
Just my opinion, but hope it makes sense.
只是我的意见，但希望它是有道理的。
回答by Paul D. Waite
I'm afraid not. Browsers seem to ignore newline characters and HTML <br>tags inside <option>elements, and I don't think JavaScript provides any way to manipulate how this text appears.
恐怕不是。浏览器似乎忽略了元素<br>内的换行符和 HTML标签<option>，我认为 JavaScript 没有提供任何方法来操纵这些文本的显示方式。
回答by Shadow Wizard is Ear For You
No, you'll have to build custom drop down list for such a thing.
不，您必须为这样的事情构建自定义下拉列表。
jQuery offers lots of these; you can probably use CSS to define heightfor specific options to achieve what you need.
jQuery 提供了很多这些；您可能可以使用 CSS 来定义height特定选项来实现您的需要。
