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

显然这不起作用:

select[multiple]{ height: 100%; } 

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

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

任何其他的想法?

在这里输入图像说明

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

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

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

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

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

你只能在Javascript / JQuery中做到这一点,你可以用下面的JQuery来做到这一点(假设你select了一个多选的ID):

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

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

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

 $(function () { $("#multiSelect").attr("size",$("#multiSelect option").length); }); 
 <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/

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

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

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

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

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

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

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

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

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

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

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

例:

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

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

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

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

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

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