style.display无法在Chrome、Safari-Firefox、IE11中正常工作

我有一个简单的表单，存在跨浏览器问题。该表格有两个选择列表，"class_chorus"one_answers"伴奏"。页面加载时，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>

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

您的新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();
	}

请记住，这是假设您的儿童合唱团价值始终在列表中排名第四。如果这个位置可以周期性地改变，那么最好获取值本身并进行比较。

您可能会遇到问题，因为将事件侦听器放在单个<option>元素上，而不是放在<select>上（浏览器对<option>元素的处理方式非常挑剔）。

尝试将函数绑定到<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();
    }
}

better使用JQuery show（）http://api.jquery.com/show/

和hide（）http://api.jquery.com/hide/

相关内容

最新更新

热门标签：