動態填充下拉列表

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;
    }
 }

演示版