显示基于上一个se的选择的选择选项;选择

我有以下。。。。

HTML

<select class="form-control" id="activity" name="activity"> 
                <option value="" selected="selected">Select Activity</option>
                <option id ="1" value="1" >Paintball</option>
                <option id ="2" value="2" >Laser Tag</option>
                <option id ="3" value="3" >Splatball</option>
                <option id ="4" value="4" >Airsoft</option>
            </select>
<select class="form-control" id="session" name="session" required></select>

JS-

(function ($) {
$('#activity').change(function() {
            var options = '';
            if($(this).val() == '1') {
                options = '<option value="1">Morning: 09.30 - 12.30</option><option value="2">All Day: 09:30 - 16:00</option><option value="3">Afternoon: 13:00 - 16:00</option>';
            }
            else if ($(this).val() == '2'){
                options = '<option value="5">Session 1: 09:30 - 11:30</option><option value="6">Session 2: 12:00 - 14:00</option><option value="7">Session 3: 14:30 - 16:30</option>';
            }
            else if ($(this).val() == '3'){
                options = '<option value="9">Session 1: 09:30 - 11:30</option><option value="10">Session 2: 12:00 - 14:00</option><option value="11">Session 3: 14:30 - 16:30</option><option value="12">Session 4: 16:30 - 18:30</option>';
            }
            else if ($(this).val() == '4'){
                options = '<option value="14">Full Day: 09:30 - 16:30</option>';
            }
            $('#session').html(options).show();
        });
})(jQuery);

我试图在第一个选择的基础上，只在第二个选择框中显示某些选项，但我无法让该死的东西发挥作用。在devtools中也没有看到任何错误。