作成方法：カascading dropdownリスト

3つのドロップダウンリストを作成します

HTMLフォーム内に3つのドロップダウンリストを作成します。

2番目と3番目のドロップダウンリストは、親ドロップダウンリストで選択された値に応じて異なるオプションを表示します。

第1ステップ - HTMLの追加：

<form name="form1" id="form1" action="/action_page.php">
  科目: <select name="subject" id="subject">
    <option value="" selected="selected">科目を選択</option>
  </select>
  <br><br>
  トピック: <select name="topic" id="topic">
    <option value="" selected="selected">科目を選択してください</option>
  </select>
  <br><br>
  章: <select name="chapter" id="chapter">
    <option value="" selected="selected">トピックを選択してください</option>
  </select>
  <br><br>
  <input type="submit" value="送信">
</form>

第2ステップ - JavaScriptの追加：

var subjectObject = {
  "フロントエンド": {
    "HTML": ["リンク", "画像", "テーブル", "リスト"],
    "CSS": ["枠線", "余白", "背景", "フロート"]
    "JavaScript": ["変数", "演算子", "関数", "条件"]
  },
  "Back-end": {
    "PHP": ["変数", "文字列", "配列"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // “章”と“トピック”のドロップダウンメニューをクリア
    chapterSel.length = 1;
    topicSel.length = 1;
    // 正しい値を表示
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // “章”のドロップダウンメニューをクリア
    chapterSel.length = 1;
    // 正しい値を表示
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

自分で試してみてください

関連ページ

チュートリアル：CSSドロップダウンメニュー

チュートリアル：ホバー可能なドロップダウンメニューの作成方法