Html Select 标签中的多行选项是否可行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1165358/
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
Are Multi-line Options in Html Select Tags Possible?
提问by chriss
Is it possible (using HTML only) to display selectwith options that span multiple lines each?
是否有可能（仅使用HTML），以显示select与option跨越每个多线S？
采纳答案by rahul
It is not possible using html select control.
无法使用 html 选择控件。
You can use a div that can act as a dropdown list using JavaScript and css.
您可以使用一个 div，该 div 可以用作使用 JavaScript 和 css 的下拉列表。
回答by Etienne Dubois
not only is it not possible on standard html, but it would then (as an object) become incompatible with the way IOS devices handle the option tag, which is to display a scroll list so it is not even reasonable to want the option tagto behave that way as it would break cross-device compatibility badly and unexpectedly.
不仅是标准的HTML它不可能，但随后将（作为一个对象）成为同程IOS设备上处理不兼容的选项标签，这是显示一个滚动列表，以便它甚至不是合理的，需要的选项标签来这样做是因为它会严重且意外地破坏跨设备兼容性。
as others have answered (i dont have enough reputation to upvote or comment yet) have said, it must be done with css/div styling etc and in that way is a lot more extensible with full html functionality within each of the option tag's as well as (via css styling) being mobile device friendly.
正如其他人回答了（我没有足够的声誉给予好评或评论还）说，它必须与CSS / DIV造型等来完成，并以这种方式是有很多与在每个全HTML功能，更可扩展的选项标签的以及（通过 css 样式）对移动设备友好。
回答by dlolsen
If your case is around iOS truncating long option text, then the solution from How to fix truncated text on <select> element on iOS7can help.
如果您的情况是关于 iOS 截断长选项文本，那么How to fix truncated text on <select> element on iOS7 中的解决方案可以提供帮助。
Add an empty optgroup at the end of the select list:
在选择列表的末尾添加一个空的 optgroup：
You can implement like this:
你可以这样实现：
<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>
回答by Joey
As the presentation of a selectelement is up to the user agent, I'm afraid you can't have that, unless some UA actually implements it. But selectas either a ListBox or ComboBox never really had much need for items spanning multiple lines. Furthermore it would greatly confuse users as they are used to one line = one item.
由于select元素的呈现取决于用户代理，恐怕您不能拥有它，除非某些 UA 实际实现了它。但是select作为 ListBox 或 ComboBox 从来没有真正需要跨越多行的项目。此外，它会极大地混淆用户，因为他们习惯于一行 = 一个项目。
回答by Quentin
No.
不。
You could use radio buttons instead though, their <label>s can word wrap.
不过，您可以改用单选按钮，它们的<label>s 可以自动换行。
回答by aehlke
It would be possible by using some JavaScript with CSS styling on HTML elements, easily done with a framework like Dojo Toolkit. Otherwise, use Radio or Checkbox controls.
通过在 HTML 元素上使用一些带有 CSS 样式的 JavaScript 是可能的，使用像 Dojo Toolkit 这样的框架很容易完成。否则，请使用 Radio 或 Checkbox 控件。
回答by user3348274
What about:
关于什么：
<!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>
I don't know if this is what you were looking for, but maybe it could help you.
我不知道这是否是你要找的，但也许它可以帮助你。
If you want to select multiple options, you must press Ctrl + click to select more options.
如果要选择多个选项，则必须按 Ctrl + 单击以选择更多选项。
If you want to disable multiselect, just erase the "multiple" parameter from the SELECT tag.
如果您想禁用多选，只需从 SELECT 标签中删除“multiple”参数。
