Javascript works in FF, but not in IE or Chrome (simple function)
<p>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 :(</p>

<pre><code>&lt;script language="javascript" type="text/javascript"&gt;
    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").style.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";
        }
    }
    &lt;/script&gt;
</code></pre>

<p>EDIT: I call the function in a drop down menu as such:</p>

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

<p>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.</p>

<p>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.</p>
