多個相關的選擇框不能正常工作

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')選擇頁面上的所有選定選項，用於每個選擇。