Wrong display of Select Option Tag in Google Chrome

Question

I have got very long list of options in 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>

Everything is OK on Firefox and Chrome.

But when I want to hide by js some options and leave displayed only few:

<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>

On Firefox still everything is OK - I see only few options very well. But on Chrome - something is wrong. I see nothing (it looks like menu with zero height) or menu is too small (if i want to display little more options - i see only 1 or 2 (little % of displayed options) with scrollbar)

What happened?

You should use js to regenrate the options by using a for loop on the options you need and set the html value of the select box. The display:none on sub-levels can be buggy . — arkoak, Mar 12 '15 at 08:46
Dear, Could you give use a bit more informations? On [JSFiddle](https://jsfiddle.net/j64j0s7s/) it works for me on both Chrome & Firefox. — Alexis Paques, Mar 12 '15 at 08:47
code to hide option is simple: $('someSelector').css('display','none'); — user3383675, Mar 12 '15 at 09:23

Wrong display of Select Option Tag in Google Chrome

0 Answers0