Google Chrome中选择选项标记显示错误

Question

我在options中有很长的select列表。

<select>
    <option value='1'>1</option>
    <option value='2'>2</option>
    ...
    <option value='100'>100</option>
    <option value='101'>101</option>
    ...
    <option value='200'>200</option>
    <option value='201'>201</option>
</select>

Firefox和Chrome上的一切正常。

但是当我想通过js隐藏一些选项并且只显示少数几个时：

<select>
    <option value='1' style='display:none'>1</option>
    <option value='2' style='display:none'>2</option>
    ...
    <option value='100' style='display:none'>100</option>
    <option value='101'>101</option>
    <option value='102'>102</option>
    <option value='103'>103</option>
    <option value='104' style='display:none'>104</option>
    ...
    <option value='200' style='display:none'>200</option>
    <option value='201' style='display:none'>201</option>
</select>

在Firefox上仍然一切正常 - 我只看到很少的选项。 但在Chrome上 - 出了点问题。我什么也看不见（它看起来像零高度的菜单）或菜单太小（如果我想显示更多的选项 - 我只看到1或2（显示选项的百分之几）与滚动条）

发生了什么事？