just started using jQuery,and i'm having a problem using the function .show()/.hide() to make a div appear and disapear when a certain option value is selected.It's working fine in firefox but not working at all in chrome and IE 8.

This is the function code i'm using :

        $(function(){

$("#produtos").click(function(){

$("#produtos_valor").show("slow");

});

$("#novidades").click(function(){

$("#produtos_valor").hide("slow");

});

$("#servicos").click(function(){

$("#produtos_valor").hide("slow");

});

}); 

and this the the html code it relates to : 

        <label>

             <span>Categoria</span>

              <select name="categoria" id="categoria">

              <option value="-1">Selecione a categoria</option>

              <option value="novidades" id="novidades">Novidades</option>

              <option value="produtos" id="produtos">Produtos</option>

              <option value="servicos" id="servicos">Serviços</option>

              </select>

           </label>

           

           <div id="produtos_valor" style="display:none">

            <label>

               <span>Valor</span>

               <input type="text" name="valor" />

            </label>

           </div><!--produtos-->

If someone could help I would be very greatfull!