ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

2段階に連動するプルダウンメニューの作り方(3ページ目)

HTMLで作った2つのプルダウンメニューを、JavaScriptで連動させる方法を解説。メイン(1階層目)のプルダウンメニューの選択項目に応じて、サブ(2階層目)のプルダウンメニューを動的に表示する方法です。2段階に連動させると2階層目の表示項目数を絞れるため、選択肢をシンプルに分かりやすく表示できる効果があります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Step2. 2階層目のプルダウンメニューを隠すJavaScriptを記述

初期状態(=ページを読み込んだ直後)では1階層目の項目は何も選択されていないので、2階層目はすべて非表示になっていなければなりません。そこで、まずはJavaScriptを使ってすべての2階層目を非表示にしましょう。

2階層目の要素すべてを一括して非表示にするJavaScriptソース:
<script type="text/javascript">
// ▼HTMLの読み込み直後に実行:
document.addEventListener('DOMContentLoaded', function() {

   // ▼2階層目の要素を全て非表示にする
   var allSubBoxes = document.getElementsByClassName("subbox");
   for( var i=0 ; i<allSubBoxes.length ; i++) {
      allSubBoxes[i].style.display = 'none';
   }

});
</script>
上記のソースをHTMLソース内のどこかに記述して下さい。すべてそのままコピー&ペーストするだけで構いません。すると、ページの読み込み直後に「class="subbox"」が指定されたすべての要素が非表示になります。ブラウザで表示すると、以下のように見えます。

サブ(2階層目)のプルダウンメニューがすべて非表示になり、メイン(1階層目)のプルダウンメニューだけが見える

2階層目のプルダウンメニューがすべて非表示になり、1階層目のプルダウンメニューだけが見える


Step2のJavaScriptソースの解説

上記のJavaScriptソースの記述内容を簡単に解説しておきます。すべてコピー&ペーストすれば良いだけなので、以下の解説は必ずしも読む必要はありません。2階層目を示す共通のclass名を「subbox」以外に変更した場合は、その部分だけを書き換えて下さい。

HTMLの読み込み直後に実行:
document.addEventListener('DOMContentLoaded', function() {
   ~~~
});
上記のように記述すると、「~~~」の部分に記述したスクリプトはHTMLソースの読み込み直後に実行されます。ページ上の画像などの読み込みは待たずに、HTMLソースだけが読み込まれた直後に実行されます。なお、「~~~」部分のスクリプトを</body>タグの直前など「処理対象のHTMLソースよりも後」に記述できるなら、この記述は省略しても問題ありません。

「class="subbox"」が指定されたすべての要素を得る:
var allSubBoxes = document.getElementsByClassName("subbox");
上記の記述で、class名が「subbox」であるすべての要素がNodeListの形で変数allSubBoxesに格納されます。ここで得られた要素1つ1つを対象にして何らかの処理を施すには、for文を使ってループさせます。
for( var i=0 ; i<allSubBoxes.length ; i++) {
   ~ 1つ1つに対して実行したい処理 ~
}

それらすべてを非表示にする:
allSubBoxes[i].style.display = 'none';
ここでは、対象の要素のdisplayプロパティに値「none」を指定することで非表示にしています。

以上の処理で、2階層目の要素すべてが非表示になります。

Step.2' 実はCSSで書けば1行で済む

上記では数行のJavaScriptで書きましたが、CSSを使えば以下の1行を記述するだけで事足ります。

2階層目の要素すべてを一括して非表示にするCSSソース:
.subbox { display: none; }
この方が記述量は圧倒的に少なくて済みますし、分かりやすくて簡単ですね。この方法を使っても構いません。

本記事でご紹介するサンプルでこの方法を使わなかったのは、JavaScriptが実行されない環境で2階層目が一切表示されなくなってしまうのを避けるためです。しかし、最近ではJavaScriptが無効に設定されている環境はさほどないでしょうから、そこまで気を遣う必要はないかもしれません。

それでは次のページで、1階層目のプルダウンメニューの選択項目に連動して、対応する2階層目の要素だけを表示させるJavaScriptを記述しましょう。
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 8
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます