动态地向选择框添加选项

Question

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

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

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

<script type="text/javascript">
        function getTimes()
        {
            var index=document.getElementById("classes").selectedIndex;
            var x=document.getElementById("schedule");

            if(index==0)
            {
                document.getElementById("schedule").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
                    x.add(option,x.options[null]);
                }
                catch (e)
                {
                    x.add(option,null);
                 }

            } 
                        }

和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>

对于代码似乎应该可以工作，但无论出于何种原因，当我选择第一个类时，在这种情况下“普拉提”，“时间”下拉框仍然是空白的。

谁能告诉我哪里出错了？

Answer 1

错误位于函数的第一行

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

Check Demo