style.display 在 Chrome、Safari 中不起作用 - Firefox、IE11 OK答案

【问题标题】：style.display not working in Chrome, Safari - Firefox, IE11 OKstyle.display 在 Chrome、Safari 中不起作用 - Firefox、IE11 OK
【发布时间】：2015-02-11 06:12:02
【问题描述】：

我有一个包含跨浏览器问题的简单表单。该表格有两个选择列表，“class_chorus”和“accompaniment”。在页面加载时，会显示 class_chorus 而隐藏伴奏。如果用户选择儿童合唱选项，则应显示伴奏选择列表。它在 Firefox 35 和 IE11 中正常工作。我无法让它在 Chrome 40 或 Safari 5.1.7 中工作。我在这里错过了什么？

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    <body>
        <form method="post" action="">
            <table id="formTable" border="0">
                <tr valign="top" style="margin-bottom:0">
                    <td>Class/Chorus </td>
                    <td>
                        <select name="class_chorus" size="1">
                            <option value="" onclick="hideAccomp();">Any</option>
                            <option value="Preschool" onclick="hideAccomp();">Early Childhood</option>
                            <option value="Elementary" onclick="hideAccomp();">Elementary</option>
                            <option value="Childrens Chorus" onclick="showAccomp();">Children's Chorus</option>
                        </select>
                    </td>
                </tr>
                <tr valign="top" style="margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0">
                    <td>
                        <div id="accomp" style="display:none"><br />
                            Accompaniment<br /><br />
                        </div>
                    </td>
                    <td>
                        <div id="accomp2" style="display:none"><br />
                            <select name="accompaniment" id="accompaniment" size="1" >
                                <option value="">Any</option>
                                <option value="None">None</option>
                                <option value="Piano">Piano</option>
                            </select>
                        </div><br />
                    </td>
                </tr>
            </table>
        </form>

        <script type="text/javascript">
            function showAccomp() {
                document.getElementById("accomp").style.display = "inline";
                document.getElementById("accomp2").style.display = "inline";
            }

            function hideAccomp() {
                document.getElementById("accomp").style.display = "none";
                document.getElementById("accomp2").style.display = "none";
            }
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript html google-chrome

【解决方案1】：

不，您不需要使用 jQuery，问题不在于您的 Javascript，而在于您的 HTML。在选项元素上使用时，Chrome 和 IE 不支持 onclick 属性。最好的跨浏览器方法是在您的选择上使用 onchange 属性（删除选项标签上的所有 onclicks），然后编写第三个函数来确定是调用您编写的显示函数还是隐藏函数。

您的新 HTML：

<select name="class_chorus" size="1" onChange="checkValue(this.selectedIndex)">
    <option value="">Any</option>
    <option value="Preschool">Early Childhood</option>
    <option value="Elementary">Elementary</option>
    <option value="Childrens Chorus">Children's Chorus</option>
  </select>

你的新 JS 函数：

function checkValue(index)
	{
		if(index == 3)
			showAccomp();
		else
			hideAccomp();
	}

请记住，这是假设您的儿童合唱团值始终在列表中排名第四。如果该位置可以定期更改，则最好获取值本身并进行比较。

【讨论】：

【解决方案2】：

您可能会因为将事件侦听器放在单个 <option> 元素上而不是 <select> 上而遇到问题（浏览器非常对您可以使用 @ 做什么很挑剔987654323@ 个元素）。

尝试为<select> 绑定一个函数到onchange，然后，当值发生变化时，获取新值并基于该值触发正确的函数。

尝试使用您已有的代码，您可以执行以下操作：

<select name="class_chorus" size="1" onchange="toggleAccomponement(event);">
    <option value="">Any</option>
    <option value="Preschool">Early Childhood</option>
    <option value="Elementary">Elementary</option>
    <option value="Childrens Chorus">Children's Chorus</option>
</select>

。 . .然后，在<script> 部分：

function toggleAccomponement(event) {
    var sCurrSelection = event.target.value;

    if (sCurrSelection === "Childrens Chorus") {
        showAccomp();
    }
    else {
        hideAccomp();
    }
}

【讨论】：

【解决方案3】：

更好地使用 JQuery show() http://api.jquery.com/show/

和隐藏() http://api.jquery.com/hide/

【讨论】：

三个很棒的建议。谢谢大家的帮助。