多个相关的选择框不能正常工作

Question

我正在寻找一系列html选择框，根据已经选择的内容显示不同的选项。我可以得到前两个工作，但不能解决为什么它不会注入到最后一个框中，即#FCadultseats选择框。

我基本上只希望FCadultseats盒子只有在电影在大电影院（在晚上9点）时才可用。

非常感谢您的帮助。我一直在尝试很多年，不知道为什么这不会工作。

这里是我的代码：

<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')选择页面上的所有选定选项，用于每个选择。