Question

我有一个包含跨浏览器问题的简单表单。表单有两个选择列表，“class_chorus”和“伴奏”。在页面加载时，将显示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>

Answer 1

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

您的新HTML：

＆＃13;

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

＆＃13;

你的新JS功能：

＆＃13;

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

＆＃13;

请记住，这假设您孩子的合唱值始终位于列表中的第四位。如果该位置可能会定期更改，那么获取值本身并将其进行比较可能会更好。

Answer 2

由于将事件监听器放在单个<option>元素上而不是<select>（浏览器非常挑剔您的内容），您可能会遇到问题可以使用<option>元素。）

尝试将函数绑定到onchange的{{1}}，然后，当值更改时，获取新值并根据该值触发正确的函数。

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

<select>

。。。然后，在<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>

Answer 3

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

并隐藏（） http://api.jquery.com/hide/

style.display无法在Chrome，Safari - Firefox，IE11中运行

3 个答案: