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

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段階の連動プルダウンメニューの動作サンプル」のソースも併せてご参照下さい。