How to set height of ListBox to auto

I have a 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开发者_Go百科>

I need to set the height of this to auto i.e I do not want scrollbar to appear.

I tried Height:auto; But it is not working in IE.

How should I do this?

Set the size property to the number of items, like this:

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

If you need to do it programmatically, you can set all <select> elements to their option length, like this:

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

You can test it out here.

You can modify it using 'line-height' eighter and putting values to '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>

Hope this helps.

Set the size attribute equal to the number of items(options).

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

try with height:100%. It is working in ie6