title: Inconsistent output of Dropdown Menu on Firefox and Chrome
body: <p>I have a very simple dropdown menu for selecting bank names.
  Here is the code:</p>
  
  <pre><code>&lt;select id = "bankoption"&gt;
  &lt;option value="bank1"&gt;bank1&lt;/option&gt;
  &lt;option style = "display:none" value ="bank4"&gt;bank4&lt;/option&gt;
  &lt;option style = "display:none" value ="bank27"&gt;bank27&lt;/option&gt;
  &lt;option style = "display:none" value ="bank22"&gt;bank22&lt;/option&gt;
  &lt;option style = "display:none" value ="bank19"&gt;bank19&lt;/option&gt;
  &lt;option style = "display:none" value ="bank21"&gt;bank21&lt;/option&gt;
  &lt;option style = "display:none" value ="bank15"&gt;bank15&lt;/option&gt;
  &lt;option style = "display:none" value ="bank23"&gt;bank23&lt;/option&gt;
  &lt;option style = "display:none" value ="bank18"&gt;bank18&lt;/option&gt;
  &lt;option style = "display:none" value ="bank26"&gt;bank26&lt;/option&gt;
  &lt;option style = "display:none" value ="bank10"&gt;bank10&lt;/option&gt;
  &lt;option style = "display:none" value ="bank17"&gt;bank17&lt;/option&gt;
  &lt;option style = "display:none" value ="bank20"&gt;bank20&lt;/option&gt;
  &lt;option style = "display:none" value ="bank16"&gt;bank16&lt;/option&gt;
  &lt;option style = "display:none" value ="bank9"&gt;bank9&lt;/option&gt;
  &lt;option style = "display:none" value ="bank11"&gt;bank11&lt;/option&gt;
  &lt;option style = "display:none" value ="bank13"&gt;bank13&lt;/option&gt;
  &lt;option style = "display:none" value ="bank3"&gt;bank3&lt;/option&gt;
  &lt;option style = "display:none" value ="bank7"&gt;bank7&lt;/option&gt;
  &lt;option style = "display:none" value ="bank25"&gt;bank25&lt;/option&gt;
  &lt;option value ="bank5"&gt;bank5&lt;/option&gt;
  &lt;option value ="bank28"&gt;bank28&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>According to above code <b>bank1, bank5</b> and <b>bank28</b> should be seen in the dropdown and not others. Surprisingly while firefox renders as expected the chrome only shows <b>bank1</b> option.</p>
  
  <p>Here are the images attached.</p>
  
  <p><img src="https://i.stack.imgur.com/lIB2C.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/wXkV2.jpg" alt="enter image description here"></p>
  
  <p>Why the browsers are rendering them differently ? If I am doing the things in wrong way then what's the correct way?</p>