動態填充下拉菜單

Question

我正在尋找一些動態地自動填充人口下拉菜單的幫助。

我寫的代碼對我來說不起作用，但是它起初並且現在停止了。

我哪裏錯了？

HTML：

<form id="booking_form" onsubmit="return checkForm()" method="post" action=""> 
    <div> 
     <!-- Select Movie --> 
     <span class="label">Movie Name:</span> 
     <select name="movie" id="movie_name" onChange="changeday(this.value);"> 
      <option value="" disabled selected>Choose Movie</option> 
      <option value="SW">Star Wars: The Force Awakens</option> 
      <option value="WC">Wedding Crashers</option> 
      <option value="GD">The Good Dinosaur</option> 
      <option value="BR">Battle Royale</option> 
     </select> 
    </div> 

    <div> 
     <!-- Select Day -->      
     <span class="label">Session Day:</span> 
     <select name="day" id="session_day"> 
      <option value="" disabled selected>Please Select a Movie</option> 
     </select> 
    </div> 
</form> 

的JavaScript：

var moviesByDays = { 
     SW: ["Monday", "Monday", "Monday", "Monday"], 
     WC: ["Tuesday", "Tues", "Tues", "Tues"], 
     GD: ["Wednesday", "Wed", "Wed", "Wed", "Wed"], 
     BR: ["Thursday", "Thurs", "Thurs", "Thurs", "Thurs"] 
} 

function changeday(value) { 
    if (value.length == 0) document.getElementById("session_day").innerHTML = "<option></option>"; 
    else { 
     var catOptions = ""; 
     for (session_dayId in moviesByDay[value]) { 
      daysOptions += "<option>" + moviesByDays[value][session_dayId] + "</option>"; 
     } 
     document.getElementById("session_day").innerHTML = daysOptions; 
    } 
} 

我怎樣才能使這項工作？

在此先感謝您的幫助。

Answer 1

那是因爲你在變量和賦值中犯了一些錯誤。在Script標籤以下用途：

var moviesByDays = { 
     SW: ["Monday", "Monday", "Monday", "Monday"], 
     WC: ["Tuesday", "Tues", "Tues", "Tues"], 
     GD: ["Wednesday", "Wed", "Wed", "Wed", "Wed"], 
     BR: ["Thursday", "Thurs", "Thurs", "Thurs", "Thurs"] 
    } 


    function changeday(value) { 
    var daysOptions = []; //That will Clear first selection on every new selection 
    if (value.length == 0) document.getElementById("session_day").innerHTML = "<option></option>"; 
    else { 
     var catOptions = ""; 
     for (session_dayId in moviesByDays[value]) {     
      daysOptions += "<option>" + moviesByDays[value][session_dayId] + "</option>"; 
     } 
     document.getElementById("session_day").innerHTML = daysOptions; 
    } 
} 

Demo