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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

2段階の連動するプルダウンメニューの作り方:ソースのまとめ

本記事の2ページ目から4ページ目まででご紹介したHTMLソース・CSSソース・JavaScriptソースをまとめて掲載しておきます。

2段階のプルダウンメニューすべてのHTMLソース:
<!-- ▼2段階プルダウンメニューの例(市を選択すると区が出てくる) -->
<div class="pulldownset">

   <!-- ========================================== -->
   <!-- (※1)▼1段階目(メイン)のプルダウンメニュー -->
   ■住所を選択:
   <select class="mainselect">
      <option value="">市を選択</option>
      <option value="kobe">神戸市</option>
      <option value="osaka">大阪市</option>
      <option value="kyoto">京都市</option>
      <option value="other">その他</option>
   </select>

   <!-- ================================================================ -->
   <!-- (※2)▼項目「神戸市」に対応する2段階目(サブ)のプルダウンメニュー -->
   <select id="kobe" class="subbox">
      <option value="">神戸の区を選択</option>
      <option value="hn">東灘区</option>
       : : :
      <option value="hg">兵庫区</option>
      <option value="sm">須磨区</option>
   </select>

   <!-- ================================================================ -->
   <!-- (※3)▼項目「大阪市」に対応する2段階目(サブ)のプルダウンメニュー -->
   <select id="osaka" class="subbox">
      <option value="">大阪の区を選択</option>
      <option value="kt">北区</option>
       : : :
      <option value="tj">天王寺区</option>
      <option value="ab">阿倍野区</option>
      <option value="se">住之江区</option>
   </select>

   <!-- ================================================================ -->
   <!-- (※4)▼項目「京都市」に対応する2段階目(サブ)のプルダウンメニュー -->
   <select id="kyoto" class="subbox">
      <option value="">京都の区を選択</option>
      <option value="uk">右京区</option>
        : : :
      <option value="fs">伏見区</option>
      <option value="ys">山科区</option>
   </select>

   <!-- ====================================================== -->
   <!-- (※5)▼項目「その他」に対応する2段階目(サブ)のボックス -->
   <span id="other" class="subbox">
      自由入力:<input type="text" value="" size="15">
   </span>

</div>
HTMLソースの解説は2ページ目にあります。上記の <div class="pulldownset"> ~ </div> で囲まれた「1階層目のプルダウンメニューと2階層目の要素」のセットは、同一ページ内に複数記述することもできます。ただし、id属性値が重複しないようご注意下さい。

CSSソース:
<style type="text/css">
/* ▼プルダウンメニューを囲む枠の装飾 */
.pulldownset {
   border: 3px double #0000cc;  /* 青色の二重線(3px) */
   background-color: #eeeeff;   /* 背景色:淡い青色 */
   margin: 1em 0px;             /* 外側の余白:上下に1文字分 */
   padding: 1em;                /* 内側の余白:周囲に1文字分 */
   overflow: auto;              /* はみ出る場合は自動調整(スクロールバーを表示) */
}
/* ▼プルダウンメニューそのものの装飾 */
select {
   font-size: 1.2em;   /* 項目の文字サイズを1.2倍に */
}
</style>
このCSSソースは動作に必須ではありません。自由にデザインして下さい。

JavaScriptソース:
<script type="text/javascript">
// ▼HTMLの読み込み直後に実行:
document.addEventListener('DOMContentLoaded', function() {

   // ▼サブBOXを全て非表示にする
   var allSubBoxes = document.getElementsByClassName("subbox");
   for( var i=0 ; i<allSubBoxes.length ; i++) {
      allSubBoxes[i].style.display = 'none';
   }

   // ▼全てのプルダウンボックスごとに処理
   var mainBoxes = document.getElementsByClassName('pulldownset');
   for( var i=0 ; i<mainBoxes.length ; i++) {
   
      var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");   // メインのプルダウンメニュー(※後でvalue属性値を参照するので、select要素である必要があります。)
      mainSelect[0].onchange = function () {
         // ▼同じ親要素に含まれている全サブBOXを消す
         var subBox = this.parentNode.getElementsByClassName("subbox");   // 同じ親要素に含まれる.subbox(※select要素に限らず、どんな要素でも構いません。)
         for( var j=0 ; j<subBox.length ; j++) {
            subBox[j].style.display = 'none';
         }
   
         // ▼指定されたサブBOXだけを表示する
         if( this.value ) {
            var targetSub = document.getElementById( this.value );   // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
            targetSub.style.display = 'inline';
         }
      }
   
   }

});
</script>
上記のスクリプトは、3ページ目で解説した「2階層目の要素すべてを一括して非表示にする」部分と、4ページ目で解説した「1階層目プルダウンメニューの項目と2階層目の要素を連動させる」部分をまとめて記述しています。

同一ページ内にプルダウンメニューがいくつあっても、上記のスクリプトは1つ記述しておくだけで動きます。共通のclass名を変更していなければ、上記のままコピー&ペーストするだけで問題ありません。

ソースは以上です。サンプルページ「2段階の連動プルダウンメニューの動作サンプル」のソースも併せてご参照下さい。

IE8以下では動かない

IE8では動作しない

IE8以下では動作しない

上記でご紹介したJavaScriptソースは代表的なブラウザで動作しますが、IE8以下では動きません。下記の2点が、IE8以下では使えないためです。

  • (a) HTMLの読み込み直後に実行させる目的で使用した addEventListenerメソッド
  • (b) 指定のclass名を持つ要素を得る getElementsByClassNameメソッド

ただ、(a)はHTML内でのスクリプトの記述位置に注意すれば省略しても動作します。また、(b)は代わりにquerySelectorAllメソッドを使う方法があります。

そこで、次のページではIE8でも動作するバージョンのソースをご紹介いたします。
  • 前のページへ
  • 1
  • 4
  • 5
  • 6
  • 8
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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