Script not working in IE and Chrome

I'm having a problem with this tiny script I wrote for a website I'm creating. I'm totally new to JavaScript, so forgive me if I'm missing something that might be obvious to you.

The aim of the script is to hide a div as soon as the page is loaded, and then to show it when the user clicks on an element in a dropdown menu. Here it is:

$(document).ready(function(){

$("#cdcpanel").hide();

$("#contrpanel").hide();

$("#clickme").click(function() {
    $("#cdcpanel").show(200, function() {
    });
    $("#contrpanel").hide(200);
});

$("#clickme2").click(function() {
    $("#contrpanel").show(200, function() {
    });
    $("#cdcpanel").hide(200);
});

$("#hideall").click(function() {
    $("#cdcpanel").hide(200);
    $("#contrpanel").hide(200);
});

});

As you can see, the divs cdcpanel and contrpanel are initially hidden. Clicking on the element called clickme will cause cdcpanel to be shown and contrpanel to be hidden. Clicking on the element clickme2, instead, will trigger the o开发者_JAVA百科pposite event. The problem is that it won't work on other browsers apart from Firefox. I've tried it up on Chrome and IE and the result is that the div is initially hidden, but then nothing happens by clicking on the dropdown menu. This script relies on JQuery. It's called at the beggining of the page using the following:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsshow.js"></script>

Any suggestion on how to make things work is welcome! Thanks in advance for your time and patience.

I don't believe that dropdown menu's option elements have click events. try change event.