I have a simple form with cross-browser issues. The form has two select lists, “class\_chorus” and “accompaniment”. On page load, class\_chorus is displayed and accompaniment is hidden. If the user selects the Children’s Chorus option, the accompaniment select list should display. It works correctly in Firefox 35 and IE11. I cannot get it to work in Chrome 40 or 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>

```