Comment régler la hauteur de ListBox auto

Question

J'ai un ListBox 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> 

Je dois régler la hauteur de ce à i.e. automatique Je ne veux pas scrollbar apparaisse.

J'ai essayé Height:auto; Mais cela ne fonctionne pas dans IE.

Comment est-ce que je devrais faire ceci?

Answer 1

Réglez le size property au nombre d'éléments, comme ceci:

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

Si vous devez le faire par programme, vous pouvez définir tous les <select> éléments à leur longueur d'option, comme ceci:

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

You can test it out here.

Answer 2

essayez avec height:100%. Il fonctionne dans ie6

Answer 3

Vous pouvez le modifier en utilisant 'line-height' et en mettant les valeurs à '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> 

Espérons que cela aide.

Answer 4

Définissez l'attribut de taille égal au nombre d'éléments (options).

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