Chrome- display:none options in select

Answer 1

The browser is causing the height of the drop down to render as the height of the first lot of visible items up to a specific size. You'll notice however that if you put two at the top, you get two lines, three visible gives three lines and so on. The other options are still there since you can reach them with the scrollbar, however the scrollbar is not stepping by the correct amount.

Hiding options in this manner breaks in more browsers than it works in. My recommendation would be to instead remove the options you don't need from the select itself rather than using display:none.