如何将ListBox的高度设置为自适应

Question

我有一个 HTML ListBox：

 <select id="targetField" multiple="multiple" name="D1" style="width:200px;">
              <option>INDIA</option>
              <option>USA</option>
              <option>UK</option>
              <option>AUSTRALIA</option>
              <option>RUSSIA</option>
              <option>FRANCE</option>
              <option>HOLLAND</option>
 </select>

我需要将此元素的高度设置为自适应，即不想显示滚动条。

我尝试使用Height:auto;，但在IE中不起作用。

我应该怎么做？

- Niraj Choubey

Answer 1

将 size 属性设置为项目数，像这样：

<select id="targetField" multiple name="D1" style="width:200px;" size="7">

如果您需要通过编程来实现这个功能，可以将所有的 <select> 元素设置为其选项长度，像这样：

$("select").attr("size", function() { return this.options.length; });

你可以在这里进行测试。

- Nick Craver

Answer 2

您可以通过使用“line-height”并将值放入“height”来修改它。

<select id="targetField" multiple="multiple" name="D1" style="width:200px; line-height:27px; float:left; height:130px;">
              <option>INDIA</option>
              <option>USA</option>
              <option>UK</option>
              <option>AUSTRALIA</option>
              <option>RUSSIA</option>
              <option>FRANCE</option>
              <option>HOLLAND</option>
</select>

希望这能帮到您。

- Jeff Norman

Answer 3

将size属性设置为选项数量的数字。

var select = $('#targetField');
select.attr('size', select[0].options.length);

- jerjer

Answer 4

尝试使用height:100%。它在ie6中有效。

- Chinmayee G