进行多重选择以调整其高度以适应没有滚动条的选项
Ale*_*lex 90 html css html-select
显然这不起作用:
select[multiple]{
height: 100%;
}
它使选择具有100%的页面高度...
auto 也不起作用,我仍然得到垂直滚动条.
还有其他想法吗？
Ale*_*lex 120
我想你可以使用该size属性.它适用于所有最近的浏览器.
<select name="courses" multiple="multiple" size="30" style="height: 100%;">
- 哦,来吧!如果你在服务器上"填充",那么你知道会有多少.如果你可以使用AJAX"填充",修改一个适度的属性将不会有任何挑战.您甚至可以在"填充"后计算JS中的选项. (17认同)
- 嗨,这与问题中所说的不起作用有何不同？ (2认同)
- 嗨,它有所不同,因为它体现了size属性.最初的问题仅涉及height属性 (2认同)
- 喔好吧.它实际上并没有使盒子缩小到内容的大小,你必须手动设置数字大小值,如果您知道有多少选项可以,但如果有动态数量的选项则更多问题.在这种情况下,您必须在填充框时设置调整大小属性的大小.我现在看到了,谢谢你的澄清. (2认同)
小智 65
您可以使用标记中的size属性执行此操作select.假设您有8个选项,那么您可以这样做:
<select name='courses' multiple="multiple" size='8'>
小智 27
旧的,但这将做你不需要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>
而且只需要少量的javascript
var select = document.getElementById('select');
select.size = select.length;
小智 13
对于jQuery,你可以试试这个.我总是做以下工作.
$(function () {
$("#multiSelect").attr("size",$("#multiSelect option").length);
});
mat*_*mmo 10
您只能在Javascript/JQuery中执行此操作,您可以使用以下JQuery执行此操作(假设您已选择了多选的id):
$(function () {
$("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});
演示:http: //jsfiddle.net/AZEFU/
- 没有依赖行高的相同想法:`$('select.expandable').each(function(){$(this).attr('size',$(this).find('option').length) })` (15认同)
- @FrancescRosàs完美!可惜这被埋没在评论中,而不是被接受的答案. (2认同)
小智 5
我知道这个问题已经过时了,但主题如何没有结束我会给予我帮助.
属性"大小"将解决您的问题.
例:
<select name="courses" multiple="multiple" size="30">
- 如果选择中总有30个选项. (2认同)
<select id="list">
<optgroup label="Group">
<option value="1">1</option>
</optgroup>
</select>
<script>
const l = document.getElementById("list")
l.setAttribute("size", l.childElementCount + l.length)
</script>
https://jsfiddle.net/maars/ou5f3jzy/