Question

I have 10 items in drop down and want to display only first 5 when i open the drop down list and rest of the items should remain in scroll.

I have the following code to control the size in JS.

$(function(){
  $("#myList").click(function(){
    $(this).attr('size', '5');
  });
});

Setting the following in HTML…

<select size="5">
  <option value=""></option>
  ...
</select>

will make the drop down to always appear with 5 items as default and browsers may handle this their own way so i thought of doing it via JS.

The problem with this is it open with 5 items but did not close automatically as what a normal drop down does, until page get refreshed (obviously). Please advise.

Answer 1

You could change the list so that it displays multiple items, and then only shows the selected when hover is removed:

$(document).ready(function(){

$("#mylist").hover(function(){

$(this).attr('size', '5');
},function(){
 $(this).removeAttr("size");   
});

});​

— SEE DEMO —