Firefox和Chrome上Dropdown菜单的输出不一致

Question

我有一个非常简单的下拉菜单，用于选择银行名称。 这是代码：

<select id = "bankoption">
<option value="bank1">bank1</option>
<option style = "display:none" value ="bank4">bank4</option>
<option style = "display:none" value ="bank27">bank27</option>
<option style = "display:none" value ="bank22">bank22</option>
<option style = "display:none" value ="bank19">bank19</option>
<option style = "display:none" value ="bank21">bank21</option>
<option style = "display:none" value ="bank15">bank15</option>
<option style = "display:none" value ="bank23">bank23</option>
<option style = "display:none" value ="bank18">bank18</option>
<option style = "display:none" value ="bank26">bank26</option>
<option style = "display:none" value ="bank10">bank10</option>
<option style = "display:none" value ="bank17">bank17</option>
<option style = "display:none" value ="bank20">bank20</option>
<option style = "display:none" value ="bank16">bank16</option>
<option style = "display:none" value ="bank9">bank9</option>
<option style = "display:none" value ="bank11">bank11</option>
<option style = "display:none" value ="bank13">bank13</option>
<option style = "display:none" value ="bank3">bank3</option>
<option style = "display:none" value ="bank7">bank7</option>
<option style = "display:none" value ="bank25">bank25</option>
<option value ="bank5">bank5</option>
<option value ="bank28">bank28</option>
</select>

根据上面的代码 bank1，bank5 和 bank28 应该在下拉列表中看到而不是其他代码。令人惊讶的是，当firefox按预期呈现时，chrome只显示 bank1 选项。

以下是附图。

为什么浏览器会以不同的方式呈现它们？如果我以错误的方式做事，那么正确的方法是什么？

Answer 1

所有预期值都显示在下拉框中。但是在chrome中，所有隐藏值都会计入列表的长度。如果单击微小向下箭头，则可以滚动到其他选项。另外需要注意的是，我可以通过按下向上和向下箭头来选择隐藏值，而框是焦点。这可能是你不想要的东西。