HTML 选择选项中的换行符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2864238/
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
Line Break in HTML Select Option?
提问by Frank Michael Kraft
Can I have a two line text in an html select option? How?
我可以在 html 选择选项中有两行文本吗？如何？
采纳答案by Quentin
No, browsers don't provide this formatting option.
不，浏览器不提供此格式选项。
You could probably fake it with some checkboxes with <label>s, and JS to turn it into a fly out menu.
你可以用一些带有<label>s 和 JS 的复选框来伪造它，把它变成一个飞出菜单。
回答by jcanker
I know this is an older post, but I'm leaving this for whomever else comes looking in the future.
我知道这是一个较旧的帖子，但我将把它留给将来寻找的其他人。
You can't format line breaks into an option; however, you can use the title attibute to give a mouse-over tooltip to give the full info. Use a short descriptor in the option text and give the full skinny in the title.
您不能将换行符格式化为选项；但是，您可以使用标题属性来提供鼠标悬停工具提示以提供完整信息。在选项文本中使用简短的描述符并在标题中提供完整的瘦身。
<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>
回答by joym8
How about putting the long text in another <option>right below and disabling it? Might be a workaround for someone so posting here.
将长文本放在另一个<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>回答by brian
A bit of a hack, but this gives the effect of a multi-line select, puts in a gray bgcolor for your multi line, and if you select any of the gray text, it selects the first of the grouping. Kinda clever I'd say :) The first option also shows how you can put a title tag in for an option as well.
有点黑客，但这给出了多行选择的效果，为您的多行放入灰色 bgcolor，如果您选择任何灰色文本，它会选择分组的第一个。我会说有点聪明 :) 第一个选项还显示了如何为选项添加标题标签。
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>回答by Arjun
HTML Code
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 Code
Javascript代码
$(function(){
$("#testselectset").selectBoxIt({
theme: "default",
defaultText: "Make a selection...",
autoWidth: false
});
});
CSS Code
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;
}
and you have to add some Jquery Library select Box Jquery CSS
你必须添加一些 Jquery 库 选择框 Jquery CSS
Please check this link JsFiddle Link
请检查此链接 JsFiddle 链接
回答by Justin Levene
Does not work fully (the hrline part) on all browsers, but here is the solution:
不能在所有浏览器上完全工作（hr行部分），但这里是解决方案：
<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>回答by Fábio Araújo
If you're using select2you can easily build something to fit the dropdown optionsand selected optionlikw below:
如果您使用的是select2，您可以轻松构建一些适合下拉选项和选择选项的内容，如下所示：
When your text option is splitted by |
当您的文本选项被分割时 |
<option value="1">Pacheco|Fmcia Pacheco|11443322551</option>
Then your script could be just like this one:
那么你的脚本可能是这样的：
<script type="text/javascript">
function formatSearch(item) {
var selectionText = item.text.split("|");
var $returnString = $('<span>' + selectionText[0] + '</br><b>' + selectionText[1] + '</b></br>' + selectionText[2] +'</span>');
return $returnString;
};
function formatSelected(item) {
var selectionText = item.text.split("|");
var $returnString = $('<span>' + selectionText[0].substring(0, 21) +'</span>');
return $returnString;
};
$('.select2').select2({
templateResult: formatSearch,
templateSelection: formatSelected
});
</script>
The result you can see below:
结果如下：
回答by user3267302
Ok i found a solution:
好的，我找到了解决方案：
HTML:
HTML：
<div class="styled-select">
<select class="select-css">
<option disabled selected></option>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
</select>
<span>How many kg's per week do you expect to be ordering</span>
</div>
CSS:
CSS：
.styled-select select.select-css {
appearance: none;
height: 80px;
pointer-events:all;
position:absolute;
top:0;
left:0;
}
.styled-select {
position:relative;
appearance: none;
overflow: hidden;
pointer-events:none;
}
jQuery:
jQuery：
$(".select-css").on("change", function(){
$(this).next('span').css('display', 'none');
});
回答by H.M Maruf
You can use a library called select2
您可以使用名为select2的库
You also can look at this Stackoverflow Question & Answer
你也可以看看这个Stackoverflow 问答
<select id="selectBox" style="width: 500px">
<option value="1" data-desc="this is my <br> multiple line 1">option 1</option>
<option value="2" data-desc="this is my <br> multiple line 2">option 2</option>
</select>
In javascript
在 JavaScript 中
$(function(){
$("#selectBox").select2({
templateResult: formatDesc
});
function formatDesc (opt) {
var optdesc = $(opt.element).attr('data-desc');
var $opt = $(
'<div><strong>' + opt.text + '</strong></div><div>' + optdesc + '</div>'
);
return $opt;
};
});
回答by RogerRoger
Instead, maybe try replacing the select with markup, e.g.
相反，也许尝试用标记替换选择，例如
// 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>