Hiding option not working on tablets

Question

I'm trying to hide all options inside a SELECT using jquery but it is not working on tablets. The code looks like this:

index.html

<select id="especialidad" name="especialidad">
    <option>Selecciona una opción...</option>
    <option value="v1">Análisis clínicos</option>
    <option value="v2">Medicina Familiar</option>
    <option value="v3">Otorrinolaringología</option>
    <option value="v4">Traumatología</option>
    <option value="v5">Urología</option>
</select>

boot.js

$.each($('select#especialidad option'), function(i,opt){
    $(opt).hide();
});

It works fine on desktop but when tested on tablets, it is not hiding anything. I've tried using jQuery instead of $ but it has no effect.

Using $('select#especialidad').find('option') instead of $('select#especialidad option') neither works.

Any idea how to do it on tablets?

Link to fiddle: http://jsfiddle.net/RV8hC/ If you enter fiddle with a PC you won't see options in the select. But entering using a tablet, options appear :(

possible duplicate of [style.display='none' doesnt work on option tags in chrome, but it does in firefox, anyone know why? or a workaround?](http://stackoverflow.com/questions/2324250/style-display-none-doesnt-work-on-option-tags-in-chrome-but-it-does-in-firefo) — Barmar, Oct 28 '13 at 16:05
Also see: http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — Barmar, Oct 28 '13 at 16:06

score 0 · Answer 1 · answered Oct 28 '13 at 16:55

I finally made it work by saving the select options in an array on load time. Then, instead of hiding them, I just used $(option).remove(); And when I need to add them depending on some filters, I just make a grep into the select array to get the option element for being appended to the list.

At least, it works fine.

Hiding option not working on tablets

1 Answers1