Javascript可以在FF中运行，但不能在IE或Chrome中运行(简单功能)

Question

这是一个相当简单的函数，只是根据用户从下拉菜单中选择的内容来显示和隐藏不同的 div。知道为什么它在 IE 或 Chrome 中不起作用，但在 FF 中起作用吗？到处搜索但找不到任何答案:(

<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").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";
        }
    }
    </script>

编辑:我在下拉菜单中调用该函数，如下所示:

<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>

我很想按照某人的建议使用 JQuery，但我对此没有任何经验，因此如果您对此有任何提示或指示，请随时提供帮助。

还要澄清这个问题，在 FireFox 中，当用户选择他们想要的任何选项时，它会通过 show 函数显示正确的 div。在 IE 中，当他们选择任何选项时，它不会显示任何内容。

Answer 1

<option>元素并不是文档中真正的一流成员。在许多浏览器(包括 IE)中，选择框是使用 OS/windowing-toolkit 的标准小部件实现的，而不是 HTML 呈现的 block ，因此 <option>不具备真实元素通常的可供性。特别是，您对它们进行样式设置和编写脚本的能力有限。

不保证选项元素参与事件处理；他们可能永远不会生成 click事件(并且您实际上不应该通过单击或其他方式区分它们的激活)。您应该使用 change 来监视选择框的状态。事件于 <select>本身。

<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>