Populate Drop Down Динамически

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