3

大学の課題のために動的に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>

コードではうまくいくように見えますが、なんらかの理由で最初のクラスを選択すると、この場合は「ピラティス」の「時間」ドロップダウン ボックスが空白のままです。

誰が私が間違っているのか教えてもらえますか?

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 に答える