Html 进行多选以调整其高度以适应没有滚动条的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9943886/
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
Make multiple-select to adjust its height to fit options without scroll bar
提问by Alex
Apparently this doesn't work:
显然这不起作用：
select[multiple]{
height: 100%;
}
it makes the select have 100% page height...
它使选择具有 100% 的页面高度...
autodoesn't work either, I still get the vertical scrollbar.
auto也不起作用，我仍然得到垂直滚动条。
Any other ideas?
还有其他想法吗？
回答by Alex
I guess you can use the sizeattribute. It works in all recent browsers.
我想您可以使用该size属性。它适用于所有最近的浏览器。
<select name="courses" multiple="multiple" size="30" style="height: 100%;">
回答by awc
You can do this using the sizeattribute in the selecttag.
Supposing you have 8 options, then you would do it like:
您可以使用标签中的size属性执行此操作select。假设你有 8 个选项，那么你会这样做：
<select name='courses' multiple="multiple" size='8'>
回答by Jarrod
Old, but this will do what you're after without need for jquery. The hidden overflow gets rid of the scrollbar, and the javascript makes it the right size.
旧的，但这将完成您所追求的工作，而无需 jquery。隐藏的溢出摆脱了滚动条，并且 javascript 使其大小合适。
<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>
And just a tiny amount of javascript
只需少量的 javascript
var select = document.getElementById('select');
select.size = select.length;
回答by Abhishek Sharma
For jQuery you can try this. I always do the following and it works.
对于 jQuery，你可以试试这个。我总是执行以下操作并且它有效。
$(function () {
$("#multiSelect").attr("size",$("#multiSelect option").length);
});
回答by mattytommo
You can only do this in Javascript/JQuery, you can do it with the following JQuery (assuming you've gave your select an id of multiselect):
您只能在 Javascript/JQuery 中执行此操作，您可以使用以下 JQuery 执行此操作（假设您已将选择的 id 设为多选）：
$(function () {
$("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});
回答by Andrii Nemchenko
selectcould contain optgroupwhich takes one line each:
select可以包含optgroup每个需要一行：
<select id="list">
<optgroup label="Group 1">
<option value="1">1</option>
</optgroup>
<optgroup label="Group 2">
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select>
<script>
const l = document.getElementById("list")
l.setAttribute("size", l.childElementCount + l.length)
</script>
In this example total sizeis (1+1)+(1+2)=5.
在此示例中，总计size为(1+1)+(1+2)=5。
回答by Victor
I know the question is old, but how the topic is not closed I'll give my help.
我知道这个问题很老，但是这个话题如何没有结束我会提供帮助。
The attribute "size" will resolve your problem.
属性“大小”将解决您的问题。
Example:
例子：
<select name="courses" multiple="multiple" size="30">
回答by juntapao
You can do this with simple javascript...
你可以用简单的javascript来做到这一点......
<select multiple="multiple" size="return this.length();">
...or limit height until number-of-records...
...或限制高度直到记录数...
<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">
回答by leonheess
To remove the scrollbar add the following CSS:
要删除滚动条，请添加以下 CSS：
select[multiple] {
overflow-y: auto;
}
Here's a snippet:
这是一个片段：
select[multiple] {
overflow-y: auto;
}<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select multiple size="3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>回答by Werner
Using the sizeattribute is the most practical solution, however there are quirks when it is applied to selectelements with only two or three options.
使用size属性是最实用的解决方案，但是将其应用于只有两个或三个选项的选择元素时会出现一些怪癖。
- Setting the size attribute value to "0" or "1" will mostly render a default select element (dropdown).
- Setting the size attribute to a value greater than "1" will mostly render a selection list with a height capable of displaying at least four items. This also applies to lists with only two or three items, leading to unintended white-space.
- 将 size 属性值设置为“0”或“1”将主要呈现默认选择元素（下拉列表）。
- 将 size 属性设置为大于“1”的值将主要呈现高度能够显示至少四个项目的选择列表。这也适用于只有两个或三个项目的列表，导致意外的空白。
Simple JavaScript can be used to set the sizeattribute to the correct value automatically, e.g. see this fiddle.
可以使用简单的 JavaScript 将size属性自动设置为正确的值，例如参见这个 fiddle。
$(function() {
$("#autoheight").attr("size", parseInt($("#autoheight option").length));
});
As mentioned above, this solution does not solve the issue when there are only two or three options.
如上所述，当只有两个或三个选项时，此解决方案并不能解决问题。
