Javascript works in FF, but not in IE or Chrome (simple function)

It's a fairly simple function that just shows and hides different div's depending on what the user selects from a dropdown menu. Any idea why it won't work in IE or Chrome, but works in FF? Been searching everywhere and can't find any answers :(

<script language="javascript" type="text/javascript">
    function show(field) {
        var val = field.value;
        if (val == "imaging")
        {
            document.getElementById("imagingDiv").style.display = "block";
            document.getElementById("inventoryDiv").style.display = "none";
            document.getElementById("chargebackDiv").style.display = "none";
            document.getElementById("studentJobAccountDiv").style.display = "none";
        }
        else if (val == "inventory")
        {
            document.getElementById("imagingDiv").style.display = "none";
            document.getElementById("inventoryDiv").style.display = "block";
            document.getElementById("chargebackDiv").style.display = "none";
            document.getElementById("studentJobAccountDiv").style.display = "none";
        }
        else if (val == "chargeback")
        {
            document.getElementById("imagingDiv").style.display = "none";
            document.getElementById("inventoryDiv").styl开发者_高级运维e.display = "none";
            document.getElementById("chargebackDiv").style.display = "block";
            document.getElementById("studentJobAccountDiv").style.display = "none";
        }
        else if (val == "studentJobAccount")
        {
            document.getElementById("imagingDiv").style.display = "none";
            document.getElementById("inventoryDiv").style.display = "none";
            document.getElementById("chargebackDiv").style.display = "none";
            document.getElementById("studentJobAccountDiv").style.display = "block";
        }
        else
        {
            document.getElementById("imagingDiv").style.display = "none";
            document.getElementById("inventoryDiv").style.display = "none";
            document.getElementById("chargebackDiv").style.display = "none";
            document.getElementById("studentJobAccountDiv").style.display = "none";
        }
    }
    </script>

EDIT: I call the function in a drop down menu as such:

<select id="reportsSelect">
                        <option value="blank" id="blank" onclick="show(this)"></option>
                        <option value="imaging" id="imaging" onclick="show(this)">Imaging Request</option>
                        <option value="inventory" id="inventory" onclick="show(this)">Inventory</option>
                        <option value="chargeback" id="chargeback" onclick="show(this)">Chargeback</option>
                        <option value="studentJobAccount" id="studentJobAccount" onclick="show(this)">Student Job Account</option>
                    </select>

I'd love to use JQuery as someone suggested, but I have 0 experience with it, so if you have any tips or pointers for that, feel free to help.

Also to clarify the issue, when in FireFox, when a user selects whichever option they want, it displays the correct div via the show function. In IE, when they select any of the options, it does not display anything.

<option> elements are not really first-class members of the document. In many browsers, including IE, select boxes are implemented using the OS/windowing-toolkit's standard widgets, and not HTML-rendered blocks, so the <option> doesn't have the usual affordances of a real element. In particular, you get limited ability to style and script them.

Option elements are not guaranteed to take part in event handling; they may never generate a click event (and you shouldn't really be distinguishing between their activation via clicking or other means anyway). You should instead monitor the state of the select box using the change event on the <select> itself.

<select id="reportsSelect">
    <option value="blank"></option>
    <option value="imaging">Imaging Request</option>
    <option value="inventory">Inventory</option>
    <option value="chargeback">Chargeback</option>
    <option value="studentJobAccount">Student Job Account</option>
</select>

<script type="text/javascript">
    document.getElementById('reportsSelect').onchange= function() {
        for (var i= 1; i<this.options.length; i++) { // 1 not 0 - skip the blank option
            var option= this.options[i];
            var div= document.getElementById(option.value+'Div');
            div.style.display= option.selected? 'block' : 'none';
        }
    };
</script>

If you want to achieve this with jQuery, here is a simple plugin for you.