我可以在html选项中添加两行文字吗?怎么样?
答案 0 :(得分:35)
我知道这是一篇较老的帖子,但我将其留给未来的其他任何人。
您无法将换行符格式化为选项;但是,您可以使用标题attibute来提供鼠标悬停工具提示以提供完整信息。在选项文本中使用短描述符,并在标题中给出完整的细分。
<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>
答案 1 :(得分:27)
不,浏览器不提供此格式化选项。
您可能会使用<label>
s的一些复选框伪造它,并将JS转换为飞出菜单。
答案 2 :(得分:12)
如何将长文本放在下面的另一个<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>
答案 3 :(得分:11)
有点破解,但这会产生多行选择的效果,为你的多行输入灰色bgcolor, 如果您选择任何灰色文本,它将选择第一个分组。 有点聪明我说:) 第一个选项还显示了如何为选项添加标题标记。
function SelectFirst(SelVal) {
var arrSelVal = SelVal.split(",")
if (arrSelVal.length > 1) {
Valuetoselect = arrSelVal[0];
document.getElementById("select1").value = Valuetoselect;
}
}
&#13;
<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>
&#13;
答案 4 :(得分:7)
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 Box Jquery CSS
请检查此链接 JsFiddle Link
答案 5 :(得分:2)
如果您使用的是select2,则可以轻松构建适合以下dropdown options和selected option的东西:
variable_name = users[n]["Transactions"] + str(names_f) + "bought" + str(quanti) + "of" + str(final[choice*3]) + "with a total price of $"+ str(price)
users[n]["Transactions"] = variable_name
分隔时|
<option value="1">Pacheco|Fmcia Pacheco|11443322551</option>
答案 6 :(得分:2)
您可以使用带有列表属性的普通输入元素,然后添加带有值的选项, 该值将显示为第一行,选项文本将自动显示为第二行。我找到了这个解决方案,看看,这种方式也可能有帮助
<label class="m-t-20">Customer List</label>
<input name="customerlist" class="customerlist form-control" list="customerlists" >
<datalist id="customerlists">
<option value="Gerda Weijers">Aw Trucks Limited </option>
<option value="Tracy Lolesi">Acorn Stoneworx Limited </option>
<option value="Pacheco">Pacheco Fmcia Pacheco</option>
</datalist>
但这仅适用于 Chrome,其他浏览器不显示值文本。
答案 7 :(得分:1)
在所有浏览器上都不能完全运行( hr 行部分),但这是解决方案:
routes.add(method: .get, uri: "/", handler: { request, response in
longAsynchronousTask(completion: {
response.appendBody(string: "Finished")
response.completed()
})
})
&#13;
答案 8 :(得分:0)
相反,也许尝试用标记替换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>
答案 9 :(得分:0)
好的,我找到了解决方法:
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:
.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:
$(".select-css").on("change", function(){
$(this).next('span').css('display', 'none');
});
答案 10 :(得分:0)
您可以使用名为select2
的库您还可以查看此Stackoverflow Question & Answer
<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>
在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;
};
});
答案 11 :(得分:0)
一个想法可能是使用optgroup。就我而言,它比禁用方法更好。与看到我认为已禁用的选项相比,它使用户感到困惑。
<select id="q1" v-model="selected" v-on:change="setCPost1(selected)">
<option value="0"></option>
<template
v-for="(child, idx) in getLevel1"
v-bind:value="child.id"
>
<optgroup v-bind:value="child.id" :key="idx"
:label="child.label"
v-if="child.label_line_two"
>
</optgroup>
<option v-bind:value="child.id" :key="idx" v-if="!child.label_line_two"
>
{{ child.label }}
</option>
<option v-bind:value="child.id" :key="idx" v-if="child.label_line_two"
style="font-style:italic">
{{ child.label_line_two }}
</option>
</template>
</select>
外部组件听起来像Vue Select一样酷,但是我现在想坚持使用本机html select。
答案 12 :(得分:0)
答案 13 :(得分:-1)
是的,使用css样式 白色空间:预包装; 在引导程序的.dropdown类中通过覆盖它。 早先是白色空间:nowrap;所以它使下拉包裹成一行。 预包装使其与宽度相符。
答案 14 :(得分:-1)
如果您只想在下拉列表中使用换行符,请执行以下操作:
<option label="" value="" disabled=""> </option>