Question

我有以下......

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中看到任何错误。

Answer 1

在html之后移动你的脚本，它会起作用。

根据先前选择中的选择显示选择选项

1 个答案: