Javascript 向选择框动态添加选项

我正在尝试为大学作业添加使用javascript动态选择元素的选项

我们正在为健身房创建一个班级预订系统，以便用户可以预订班级。我想使用下拉框，所以选择类，然后选择使用下一个下拉框的时间，因此它必须根据所选的类进行更改。最后，用户将在最后一个框中选择私人教练，根据选择的时间段再次创建

这就是我到目前为止所做的（javascript方面）：

函数getTimes（）
{
var index=document.getElementById（“类”）。selectedIndex；
var x=document.getElementById（“附表”）；
如果（索引==0）
{
document.getElementById（“附表”）.value=“”；
}
else if（索引==1）
{
var option=document.createElement（“选项”）；
option.text=“星期一晚上8:00”；
尝试
{
//对于早于版本8的IE-来自w3学校
x、 添加（选项，x.options[null]）；
}
捕获（e）
{
x、 添加（选项，空）；
}
} 
}

和html：

<div>
 <span class="label">Class:</span>      
 <select class="dropdown" id="classes" name="classes"     onChange="getTimes();">
        <option value="none"> </option>
            <option value="pilates">Pilates</option>
        <option value="crossfit">Cross Fit</option>
  </select>
  </div>

<div>
  <span class="label">Time:</span>
  <select class="dropdown" id="schedule"></select>
</div>

 <div>
  <span class="label">Trainer:</span>
  <select class="dropdown" id="trainer"></select>
  </div>

类别：
普拉提
交叉配合
时间：
教练：

对于代码来说，它似乎应该可以工作，但无论出于什么原因，当我选择第一个类时，在本例中“普拉提”的“时间”下拉框仍然是空的

---

有人能告诉我哪里出错了吗？

错误在函数的第一行

function getTimes();

                   ^------ You have a semi colon here
                           which is not supposed to be there

如果再次引用同一元素，最好缓存选择器。 使用Javascript绑定事件，而不是内联绑定事件

// Store you selectors so that you can use later
// This will improve your performance
var classDropdown = document.getElementById("classes"),
    scheduleDropdown = document.getElementById("schedule");
// Abbd events using javascript
classDropdown.addEventListener('change', getTimes);

function getTimes() {
      var index = classDropdown.selectedIndex;

      if (index == 0) {
          scheduleDropdown.value = " ";
      } else if(index == 1) {
          var option = document.createElement("option");
          option.text = "Monday 8:00pm";
          try {
              // for IE earlier than version 8- from w3 schools
              scheduleDropdown.add(option, x.options[null]);
          } catch (e) {
              scheduleDropdown.add(option, null);
          }
      }
  }

---

您所指的计划元素在哪里？Javascript不是JavaMan谢谢，编辑过了，我把代码删掉了。是的，我知道，输入错误…你还缺少函数的右括号还有另外一个else if语句不在上面的代码示例中，所以函数的右括号在那里。它仍然不起作用..你在html文件中的什么地方包含了脚本？第@SushnanthYou节代码不起作用，因为您已将脚本包含在任何元素之前的头部中。尝试将其移动到body标签的末尾之前，它应该可以正常工作

// Store you selectors so that you can use later
// This will improve your performance
var classDropdown = document.getElementById("classes"),
    scheduleDropdown = document.getElementById("schedule");
// Abbd events using javascript
classDropdown.addEventListener('change', getTimes);

function getTimes() {
      var index = classDropdown.selectedIndex;

      if (index == 0) {
          scheduleDropdown.value = " ";
      } else if(index == 1) {
          var option = document.createElement("option");
          option.text = "Monday 8:00pm";
          try {
              // for IE earlier than version 8- from w3 schools
              scheduleDropdown.add(option, x.options[null]);
          } catch (e) {
              scheduleDropdown.add(option, null);
          }
      }
  }