javascript - 多个相关选择框不起作用

Question

我希望在 html 中制作一系列选择框，根据已选择的内容显示不同的选项。我可以让前两个工作，但无法弄清楚为什么它没有注入(inject)到这里的最后一个框，#FCadultseats 选择框。

我基本上希望仅当电影在大电影院(晚上 9 点)上映时才能使用 FCadultseats 盒子。

非常感谢您提供的所有帮助。我已经尝试了很多年，但不知道为什么这行不通。

这是我的代码:

<form id = "booking" method = "POST" action = "testserver">
                    Day: 
                    <select id = "dayselector" name = "day">
                        <option disabled selected> -- Select a Day -- </option> 
                        <option value= "Monday">Monday </option>
                        <option value = "Tuesday">Tuesday</option>
                        <option value = "Wednesday">Wednesday</option>
                        <option value = "Thursday">Thursday</option>
                        <option value = "Friday">Friday</option>
                        <option value = "Saturday">Saturday</option>
                        <option value = "Sunday">Sunday</option>
                    </select>   
                    <br>
                    Time and Cinema: 
                    <select id ="timeselector" name ="time">
                        <option disabled selected> -- Select a Time -- </option>
                    </select> 
                    First Class Adults: <select id ="FCadultseats">
                        <option disabled selected> -- Not Available -- </option>
                    </select>
</form>



$(document).ready(function(){
$("#dayselector").change(function(){
    var sel_day = $('option:selected').val();
    if (sel_day == "Saturday" || sel_day == "Sunday"){
        $("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option><option value ="4">4pm - Small Cinema</option>'); 
    } else {    
        $("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option>');
    }
});             

$("#timeselector").change(function(){
    var sel_time = $('option:selected').val();
    if (sel_time == 9){
    $("#FCadultseats").html('<option value ="0">0</option><option value ="1"></option><option value ="2">2</option><option value ="3">3</option><option value ="4">4</option><option value ="5">5</option><option value ="6">6</option><option value ="7">7</option><option value ="8">8</option><option value ="9">9</option><option value ="10">10</option><option value ="11">11</option><option value ="12">12</option>');
    }
});

});

Answer 1

尝试改变

var sel_day = $('option:selected').val();

至

var sel_day = this.value;

并在两个地方都这样做。

$('option:selected') 为每个选择选择页面上的所有选定选项。