Estoy tratando de ocultar algunas opciones en un cuadro desplegable usando .hide (). Esto funciona perfectamente bien en Firefox y Chrome, pero no funciona en IE y Safari. Mi código original es más complejo, pero lo he reducido a esto.

He probado varias combinaciones y nada ha funcionado.

.hide () funciona, pero no por cosas dentro de las etiquetas de opciones por alguna razón.

¿Puede alguien ayudarme? Esto me está volviendo loco. Muchas gracias por tomarse el tiempo de ayuda!

Aquí está mi jscript:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".wrapper1").hide();
        });
    </script>

Aquí está el HTML:

                <label for="prodName">Product Name:</label> 
                <input type="text" name="prodName" /><br />

                <label for="candy">Candy:</label> 
                <select name="candy" id="candy">
                        <option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. -->
                        <option value="1" class="wrapper1">Hide this 1</option>
                        <option value="2" class="wrapper1">Hide this 2</option>
                        <option value="3" class="wrapper2">Show this 1</option>     
                </select><br />