<!DOCTYPE html>
<html>
    <head>
        <title>OnChange</title>
    </head>
    <body>
        <div>
            <form action="" method="post">
                <div>
                    Select:
                    <select name="firstSelect" id="firstSelect">
                        <option value="Subject1,Subject2,Subject3">Subject 1 - 3</option>
                        <option value="Subject4,Subject5,Subject6">Subject 3 - 6</option>
                        <option value="Subject7,Subject8,Subject9">Subject 7 - 9</option>
                        <option value="Subject10,Subject11,Subject12">Subject 10 - 12</option>
                    </select>
                </div>
                <div>
                    <select name="secondSelect" id="secondSelect">
                    </select>
                </div>
            </form>
        </div>

        <!-- Scripts -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
            $("#firstSelect").change(function() {
                alert("a");
                $("#secondSelect").html("");
                var selectedOption = $("#firstSelect").val();
                var options = selectedOption.split(",");
                for(var i = 0; i < options.length; i++) {
                    $("#secondSelect").append("<option value="+options[i]+">"+options[i]+"</option>");
                }
            });
        </script>
    </body>
</html>