Firefox和Chrome下拉菜單的輸出不一致

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渲染如預期鉻只顯示bank1選項。

下面是附加的圖像。

爲什麼瀏覽器不同的渲染呢？如果我以錯誤的方式做事，那麼正確的方法是什麼？

Answer 1

所有預期值都顯示在下拉框中。然而在chrome中，所有的隱藏值都被包含在列表的長度中。如果你點擊小箭頭，你可以滾動到其他選項。另外要注意的是，我可以通過點擊向上和向下箭頭來選擇隱藏值，而框是焦點。這可能是你不想要的東西。