2024/05/19 (最終更新日: 2024/05/26)

セレクトボックスで表示内容を切り替える

JavaScript Web制作

こんにちは、トシキです。
今回は、セレクトボックスで表示内容を切り替える方法について解説します。

本記事の内容

①セレクトボックスで表示内容を切り替える

1-01. HTML
1-02. CSS
1-03. JavaScript

②初期状態でコンテンツを表示したい場合

2-01. HTML
2-02. JavaScript

③まとめ

スポンサードサーチ

セレクトボックスで表示内容を切り替える

以下のような動作になります。
CodePenではPugとSCSSになっていますが、「View Compiled」をクリックするとHTMLとCSSに変換できます。

See the Pen セレクトボックスで表示を切り替える by tosshii (@totototosshii) on CodePen.

1-01. HTML


<div class="ly_cont">
  <div class="bl_selectToggle_wrapper">
    <select class="bl_selectToggle" id="js_selectToggle">
      <option value="" disabled>セレクトメニューを選択してください</option>
      <option value="selectCont01">セレクトメニュー01</option>
      <option value="selectCont02">セレクトメニュー02</option>
      <option value="selectCont03">セレクトメニュー03</option>
    </select>
  </div>
  <div class="bl_selectCont" id="selectCont01">
    <div class="bl_selectCont_body">
      <p>セレクトメニュー01のコンテンツを表示。</p>
    </div>
  </div>
  <div class="bl_selectCont" id="selectCont02">
    <div class="bl_selectCont_body">
      <p>セレクトメニュー02のコンテンツを表示。</p>
    </div>
  </div>
  <div class="bl_selectCont" id="selectCont03">
    <div class="bl_selectCont_body">
      <p>セレクトメニュー03のコンテンツを表示。</p>
    </div>
  </div>
</div>

　
<option value="" disabled>セレクトメニューを選択してください</option>

セレクトボックスの最初のoptionタグには、disabledを付与しています（disabledとdisabled="disabled"のどちらの書き方でも問題ありません）。
これにより、セレクトメニューを展開した際に表示される「セレクトメニューを選択してください」は選択できないようにしています。


<!-- 紐付けたいメニュー（value）とコンテンツ（id）の値を合わせる -->
<option value="selectCont01">セレクトメニュー01</option>
<div class="bl_selectCont" id="selectCont01">

valueの値とコンテンツ（.bl_selectCont）に指定しているidの値を同じにすることで、切り替え表示の紐付けをしています。

1-02. CSS


// レイアウト用
.ly_cont{
  display: grid;
  place-content: center;
  padding-block: 100px;
}

// コンテンツは非表示
.bl_selectCont {
  display: none;
}

// .is_activeが付与されたらコンテンツを表示
.bl_selectCont.is_active {
  display: revert;
}

全てのコンテンツを初期状態では非表示にするため、display: none;を指定します。
.is_activeはJavaScriptで付与して表示状態に切り替えます。

もしセレクトボックスの矢印をカスタマイズしたい場合、selectタグに擬似要素は使えないため、代わりに親要素である.bl_selectToggle_wrapperの擬似要素で実装してください。

1-03. JavaScript


// id="js_selectToggle"が指定されたselect要素を取得
const selectToggle = document.getElementById('js_selectToggle');
if (selectToggle) {
  // valueが空のセレクトメニューを初期表示に設定
  selectToggle.value = "";
  // セレクトメニューが変更されたら実行
  selectToggle.addEventListener('change', () => {
    // 変更されたセレクトメニューのvalueを取得
    const toggleVal = selectToggle.value;
    document.querySelectorAll('.bl_selectCont').forEach(selectCont => {
      // 各コンテンツのIDがtoggleValと一致するかを確認し、条件に応じてis_activeクラスを制御
      const isActive = selectCont.id === toggleVal;
      // isActiveがtrueならis_activeクラスを追加し、falseなら削除
      selectCont.classList.toggle('is_active', isActive);
    });
  });
}


const selectToggle = document.getElementById('js_selectToggle');
if (selectToggle) {
// selectToggle（id="js_selectToggle"）が存在していれば処理
}

ページ内からid="js_selectToggle"を取得して、もし存在していれば実行します。
idはselectタグに付与しています。


selectToggle.value = "";

select要素の選択状態を初期化しています。
選択されているvalueを空の値 ("") に設定することで、最初のoptionタグにあるvalueの値が空の選択肢（この場合「セレクトメニューを選択してください」）が表示されます。


selectToggle.addEventListener('change', () => {});

セレクトメニューが変更されたらchangeイベントが発火します。


const toggleVal = selectToggle.value;

選択されたoptionタグのvalueを取得し、定数toggleValに代入します。


document.querySelectorAll('.bl_selectCont').forEach(selectCont => {
// 各要素に対して実行したい処理
});

全てのコンテンツ要素（.bl_selectCont）を取得し、forEachで取得した各要素に実行したい処理を行います。

 const isActive = selectCont.id === toggleVal;

selectCont.idは、forEachで取得した.bl_selectCont要素のidの値です。
そしてこれを、toggleValに代入されたvalueの値と厳密に比較しています。
selectCont.idとtoggleValが等しい場合はtrueを、等しくない場合はfalseをisActiveに代入します。


selectCont.classList.toggle('is_active', isActive);

selectCont要素に.is_activeクラスを追加または削除します。
isActiveがtrueの場合は.is_activeクラスを追加し、falseの場合は削除されます。
これにより、isActiveの値に応じてselectCont要素の表示状態を制御しています。

初期状態でコンテンツを表示したい場合

初期状態でコンテンツを表示しておきたい場合もあるかと思います。
その場合はHTMLとJavaScriptを少し弄ります。
以下はセレクトメニュー01が初期表示されている例です。

See the Pen セレクトボックスで表示内容を切り替える② by tosshii (@totototosshii) on CodePen.

2-01. HTML


<div class="ly_cont">
  <div class="bl_selectToggle_wrapper">
    <select class="bl_selectToggle" id="js_selectToggle">
      <!-- <option value="" disabled>セレクトメニューを選択してください</option> -->
      <option value="selectCont01">セレクトメニュー01を初期表示</option>
      <option value="selectCont02">セレクトメニュー02</option>
      <option value="selectCont03">セレクトメニュー03</option>
    </select>
  </div>
  <!-- is_activeクラスを付与  -->
  <div class="bl_selectCont is_active" id="selectCont01">
    <div class="bl_selectCont_body">
      <p>セレクトメニュー01のコンテンツを初期表示。</p>
    </div>
  </div>
  <div class="bl_selectCont" id="selectCont02">
    <div class="bl_selectCont_body">
      <p>セレクトメニュー02のコンテンツを表示。</p>
    </div>
  </div>
  <div class="bl_selectCont" id="selectCont03">
    <div class="bl_selectCont_body">
      <p>セレクトメニュー03のコンテンツを表示。</p>
    </div>
  </div>
</div>

valueが空のoptionタグを外して、初期表示したいコンテンツ（.bl_selectCont）には.is_activeを付与しています。

2-02. JavaScript


// id="js_selectToggle"が指定されたselect要素を取得
const selectToggle = document.getElementById('js_selectToggle');
if (selectToggle) {
  // valueが空のセレクトメニューを初期表示に設定
  // selectToggle.value = "selectCont01"; ←削除もしくは、初期表示したい値を指定すればOK
  // セレクトメニューが変更されたら実行
  selectToggle.addEventListener('change', () => {
    // 変更されたセレクトメニューのvalueを取得
    const toggleVal = selectToggle.value;
    document.querySelectorAll('.bl_selectCont').forEach(selectCont => {
      // 各コンテンツのIDがtoggleValと一致するかを確認し、条件に応じてis_activeクラスを制御
      const isActive = selectCont.id === toggleVal;
      // isActiveがtrueならis_activeクラスを追加し、falseなら削除
      selectCont.classList.toggle('is_active', isActive);
    });
  });
}

selectToggle.value = "";の部分を削除するか、初期表示したい値を指定するだけでOKです。

スポンサードサーチ