HTMLselect选项中的换行符？
我可以在html选项中有两行文本吗？ 怎么样？
不，浏览器不提供这种格式选项。
你也许可以用<label>和JS的checkbox来伪装成一个飞出菜单。
我知道这是一个较旧的post，但是我将这个留给未来的其他人看。
您不能将换行符设置为选项; 但是，您可以使用标题attibute来提供鼠标hover工具提示以提供完整的信息。 在选项文本中使用简短的描述符，并在标题中给出完整的内容。
<option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts! Always be sure to read the fine print!">1</option>
有点黑客，但是这会产生多行select的效果，为你的多行添加一个灰色的bgcolor，如果你select了任何一个灰色的文本，它会select第一个分组。 有点聪明我会说:)第一个选项也显示了如何可以把一个标题标签为一个选项。
function SelectFirst(SelVal) { var arrSelVal = SelVal.split(",") if (arrSelVal.length > 1) { Valuetoselect = arrSelVal[0]; document.getElementById("select1").value = Valuetoselect; } }
<select name="select1" id="select1" onchange="SelectFirst(this.value)"> <option value="1" title="this is my long title for the yes option">Yes</option> <option value="2">No</option> <option value="2,1" style="background:#eeeeee"> This is my description for the no option</option> <option value="2,2" style="background:#eeeeee"> This is line 2 for the no option</option> <option value="3">Maybe</option> <option value="3,1" style="background:#eeeeee"> This is my description for Maybe option</option> <option value="3,2" style="background:#eeeeee"> This is line 2 for the Maybe option</option> <option value="3,3" style="background:#eeeeee"> This is line 3 for the Maybe option</option> </select>
HTML代码
<section style="background-color:rgb(237.247.249);"> <h2>Test of select menu (SelectboxIt plugin)</h2> <select name="select_this" id="testselectset"> <option value="01">Option 1</option> <option value="02">Option 2</option> <option value="03">Option 3</option> <option value="04">Option 4</option> <option value="05">Option 5</option> <option value="06">Option 6</option> <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option> <option value="08">Option 8</option> <option value="09">Option 9</option> <option value="10">Option 10</option> </select> </section>
Javascript代码
$(function(){ $("#testselectset").selectBoxIt({ theme: "default", defaultText: "Make a selection...", autoWidth: false }); });
CSS代码
.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options { width: 400px; /* Width of the dropdown button */ border-radius:0; max-height:100px; } .selectboxit-options .selectboxit-option .selectboxit-option-anchor { white-space: normal; min-height: 30px; height: auto; }
你必须添加一些Jquery库select框JQuery的CSS
Jquery Ui敏JS
select框Js
请检查这个链接JsFiddle链接
如何把长文本放在另一个<option>右下并禁用它？ 可能是在这里张贴的人的解决方法。
<select> <option>My real option text</option> <option disabled style="font-style:italic"> (...and my really really long option text that is basically a continuation of previous option)</option> <option disabled style="font-style:italic"> (...and still continuing my previous option)</option> <option>Another real option text</option> </select>
在所有浏览器上都不能完全工作（ 小时线部分），但是这里是解决scheme：
<select name="selector"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option disabled><hr></option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select>
相反，也许尝试更换select与标记，例如
// Wrap any selects that should be replaced $('select.replace').wrap('<div class="select-replacement-wrapper"></div>'); // Replace placeholder text with select's initial value $('.select-replacement-wrapper').each(function() { $(this).prepend('<a>' + $('select option:selected', this).text() + '</a>'); }); // Update placeholder text with updated select value $('select.replace').change(function(event) { $(this).siblings('a').text( $('option:selected', this).text() ); });
/* Position relative, so that we can overlay the hidden select */ .select-replacement-wrapper { position: relative; border: 3px solid red; /* to show area */ width: 33%; margin: 0 auto; } /* Only shows if JS is enabled */ .select-replacement-wrapper a { /* display: none; */ /* Notice that we've centered this text - you can do whatever you want, mulitple lines wrap, etc, since this is not a select element' */ text-align: center; display: block; border: 1px solid blue; } select.replace { position: absolute; width: 100%; height: 100%; top: 0; border: 1px solid green; opacity: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="dropdown" class="replace"> <option value="First">First</option> <option value="Second" selected>Second, and this is a long line, just to show wrapping</option> <option value="Third">Third</option> </select>
是的，通过使用CSS样式白色空间：预先包装; 在引导的.dropdown类中，通过覆盖它。 此前它是白色空间：nowrap; 所以它使下拉列表包装成一行。 预先包装根据宽度。
