Cómo establecer la altura del cuadro de lista para auto

Question

Tengo un cuadro de lista HTML:

<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> 

necesito fijar la altura de esto es decir automático no quiero que aparezca la barra de desplazamiento.

Probé Height:auto; Pero no funciona en IE.

¿Cómo debo hacer esto?

Answer 1

Ajuste el size property al número de artículos, como este:

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

Si tiene que hacerlo mediante programación, se pueden establecer todos <select> elementos a su longitud de la opción, así:

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

You can test it out here.

Answer 2

prueba con height:100%. Está funcionando en ie6

Answer 3

Puede modificarlo usando 'line-height' eighter y poniendo valores a '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> 

Espero que esto ayude.

Answer 4

Establezca el atributo de tamaño igual al número de elementos (opciones).

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