3/8 2段階に連動するプルダウンメニューの作り方 [ホームページ作成] All About

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を記述しましょう。