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，但我对它的经验是 0，所以如果您对此有任何提示或指示，请随时提供帮助。

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

Answer 1

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

不保证选项元素参与事件处理；他们可能永远不会生成click 事件（无论如何，您不应该通过单击或其他方式真正区分它们的激活）。您应该使用<select> 本身的change 事件来监视选择框的状态。

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

Answer 2

如果你想用 jQuery 实现这一点，这里是 a simple plugin。