进行多重select以调整其高度以适应不带滚动条的选项

显然这不起作用：

select[multiple]{ height: 100%; } 

它使select有100％的页面高度…

auto也不工作，我仍然得到垂直滚动条。

任何其他的想法？

Answer 1

我想你可以使用尺寸属性。 它适用于所有最新的浏览器。

 <select name='courses' multiple="multiple" size=30 style='height: 100%;'> 

Answer 2

您可以使用select标签中的size属性来完成此操作。 假设你有8个选项，那么你会这样做：

 <select name='courses' multiple="multiple" size='8'> 

Answer 3

老，但这将做你以后不需要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> 

而只是less量的JavaScript

 var select = document.getElementById('select'); select.size = select.length; 

Answer 4

你只能在Javascript / JQuery中做到这一点，你可以用下面的JQuery来做到这一点（假设你select了一个多选的ID）：

 $(function () { $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20); }); 

演示： http : //jsfiddle.net/AZEFU/

Answer 5

对于jQuery，你可以试试这个。 我总是做下面的工作。

 $(function () { $("#multiSelect").attr("size",$("#multiSelect option").length); }); 

Answer 6

 <select id='list'> <optgroup label='Group'> <option value='1'>1</option> </optgroup> </select> <script> var l = document.getElementById('list'); l.setAttribute('size',l.childElementCount+l.length); </script> 

https://jsfiddle.net/maars/ou5f3jzy/

Answer 7

你可以用简单的JavaScript做到这一点…

 <select multiple="multiple" size="return this.length();"> 

…或限制高度，直到logging数…

 <select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;"> 

Answer 8

使用size属性是最实际的解决scheme，但是当它被用于select只有两个或三个选项的元素时，会出现一些怪癖。

• 将尺寸属性值设置为“0”或“1”将主要呈现默认的select元素（下拉框）。
• 将尺寸属性设置为大于“1”的值将主要呈现具有能够显示至less四个项目的高度的select列表。 这也适用于只有两个或三个项目的列表，导致意外的空白。

简单的JavaScript可以用来自动设置大小属性为正确的值，例如看到这个小提琴 。

 $(function() { $("#autoheight").attr("size", parseInt($("#autoheight option").length)); }); 

如上所述，当只有两个或三个选项时，此解决scheme不能解决问题。

Answer 9

我知道这个问题很老，但是这个话题不是封闭的，我会给我的帮助。

属性“大小”将解决您的问题。

例：

 <select name="courses" multiple="multiple" size="30"> 

Answer 10

select框的呈现方式由浏览器本身决定。 所以每个浏览器都会显示另一个高度的选项列表框的高度。 你不能影响这一点。 你可以改变的唯一方法是从头开始自己select。

Answer 11

朋友：如果你从数据库中检索数据：你可以调用这个$ registers = * _num_rows（Result_query）然后

 <select size=<?=$registers + 1; ?>"> 

Answer 12

我最近有这个要求，并使用这个问题的其他职位创build此脚本：

 $("select[multiple]").each(function() { $(this).css("height","100%") .attr("size",this.length); })