style.display在Chrome，Safari和Firefox中均无法正常工作

Question

I have a simple form with cross-browser issues. 我有一个带有跨浏览器问题的简单表格。 The form has two select lists, “class_chorus” and “accompaniment”. 该表格有两个选择列表，“ class_chorus”和“伴奏”。 On page load, class_chorus is displayed and accompaniment is hidden. 在页面加载时，显示class_chorus并隐藏伴奏。 If the user selects the Children's Chorus option, the accompaniment select list should display. 如果用户选择“儿童合唱”选项，则应显示伴奏选择列表。 It works correctly in Firefox 35 and IE11. 它可以在Firefox 35和IE11中正常工作。 I cannot get it to work in Chrome 40 or Safari 5.1.7. 我无法在Chrome 40或Safari 5.1.7中使用它。 What am I missing here? 我在这里想念什么？

<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

No you don't need to use jQuery, the problem isn't your Javascript but rather your HTML. 不，您不需要使用jQuery，问题不在于您的Javascript，而在于您的HTML。 The onclick attribute is not supported in Chrome and IE when used on option elements. 在选项元素上使用Chrome和IE时，不支持onclick属性。 The best cross browser method would be to use the onchange attribute on your select (remove all onclicks on the option tags) and then write a third function to determine whether to call the show or hide functions you wrote. 最好的跨浏览器方法是在您的选择上使用onchange属性（删除选项标签上的所有onclicks），然后编写第三个函数以确定是调用您编写的show还是hide函数。

Your new HTML: 您的新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>

Your new JS function: 您的新JS函数：

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

Bear in mind that this assumes your Children's Chorus value is always fourth in the list. 请记住，这假设您的“儿童合唱”值始终是列表中的第四位。 If that position could change periodically, it might be better to get the value itself and compare that instead. 如果该位置可以定期更改，则最好获取值本身并进行比较。

Answer 2

You are probably running into issues as a result of putting the event listener on the individual <option> elements, rather than the <select> (browsers are VERY picky about what you can do with <option> elements). 由于将事件侦听器放在各个<option>元素而不是<select>上，因此您可能会遇到问题（浏览器对使用<option>元素可以做什么非常挑剔）。

Try binding a function to the onchange for the <select> , instead, and then, when the value changes, get the new value and trigger the correct function based on that. 尝试将功能绑定到<select>的onchange ，然后，当值更改时，获取新值并基于该值触发正确的功能。

Trying to use the code that you already have, you could do something like this: 尝试使用已有的代码，您可以执行以下操作：

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

. 。 . 。 . 。 and then, in the <script> section: 然后在<script>部分中：

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

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

Answer 3

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

and hide() http://api.jquery.com/hide/ 和hide（） http://api.jquery.com/hide/

style.display在Chrome，Safari和Firefox中均无法正常工作

问题描述

3 个解决方案

解决方案1
1 2015-02-10 21:49:18

解决方案2
1 已采纳 2015-02-10 22:02:53

解决方案3
-2 2015-02-10 21:40:08

style.display在Chrome，Safari和Firefox中均无法正常工作

问题描述

3 个解决方案

解决方案1 1 2015-02-10 21:49:18

解决方案2 1 已采纳 2015-02-10 22:02:53

解决方案3 -2 2015-02-10 21:40:08

解决方案1
1 2015-02-10 21:49:18

解决方案2
1 已采纳 2015-02-10 22:02:53

解决方案3
-2 2015-02-10 21:40:08