Question

        $("select[name=program]").change(function () {
            switch ($("select[name=program]").val()) {
                case 'Women\'s':
                    $("tr#levelCheck").html(
                        "<th>Level</th>" +
                        "<td>" + 
                            "<select name='level'>" +
                                "<option value='Senior'>Senior</option>" +
                                "<option value='Junior'>Junior</option>" +
                            "</select>" +
                        "</td>"
                    );
                default:
                $("tr#levelCheck").html("");
            }
        });

Here is my html

<tr>
    <th>Program</th>
    <td>{html_options name="program" output="$program" values="$program"}</td>
</tr>
<tr id="levelCheck"></tr>

I just want my other menu to show up when I select one of my other menu options from the program dropdown. Basically, I select Women’s, another menu shows up below and I am off to the races. Why isn’t my dropdown displaying when I select my Women’s Option?

Answer 1

You need a break before your default case. Right now, you build the menu and then you fall into the default case and your HTML is cleared.

$("select[name=program]").change(function () {
            switch ($("select[name=program]").val()) {
                case 'Women\'s':
                    $("tr#levelCheck").html(
                        "<th>Level</th>" +
                        "<td>" + 
                            "<select name='level'>" +
                                "<option value='Senior'>Senior</option>" +
                                "<option value='Junior'>Junior</option>" +
                            "</select>" +
                        "</td>"
                    );
                    break;
                default:
                    $("tr#levelCheck").html("");
                    break;
            }
        });