3

I am trying to add options to select element using javascript dynamically for a university assignment.

We are creating a class booking system for a gym so users can book into a class. I wanted to use drop down boxes, so you select the class, then the time using the next drop down box, so it has to change depending on the class selected. Finally, the user would select the personal trainer in the last box, once again created depending on what timeslot is selected.

This is what I have so far (javascript side):

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

            } 
                        }

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

To the code seems like it should work, but for whatever reason when I select the first class, in this case "Pilates" the "Time" drop down box is still blank.

Can anyone tell me where I am going wrong?

4

1 回答 1

2

错误在函数的第一行

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

检查演示

于 2013-08-10T10:11:14.080 回答