セレクトボックス選択項目によって表示内容変更

Web開発において、ユーザーインタラクションを豊かにする要素の一つに、セレクトボックスを使用した動的なコンテンツの表示切り替えがあります。この技術を用いることで、ユーザーはページをリロードすることなく、必要な情報を瞬時に取得することが可能になります。この記事では、JavaScriptを使用してセレクトボックスの選択に基づいて表示内容を動的に変更する方法を紹介します。

HTML

まず、セレクトボックスと表示したいコンテンツのための基本的なHTMLマークアップを作成します。

<select id="selectBox" onchange="showContent()">
  <option value="">選択してください</option>
  <option value="content1">コンテンツ 1</option>
  <option value="content2">コンテンツ 2</option>
  <option value="content3">コンテンツ 3</option>
</select>

<div id="content1" class="content" style="display:none;">ここにコンテンツ 1 が表示されます。</div>
<div id="content2" class="content" style="display:none;">ここにコンテンツ 2 が表示されます。</div>
<div id="content3" class="content" style="display:none;">ここにコンテンツ 3 が表示されます。</div>

このHTML構造では、ユーザーがセレクトボックスから選択するとonchangeイベントが発火し、showContent関数が呼び出されるようになっています。また、各コンテンツは初期状態で非表示に設定されています。

JavaScriptによる動的な表示切り替え

次に、セレクトボックスの選択に応じてコンテンツの表示を切り替えるJavaScript関数showContentを実装します。

function showContent() {
  var selectedValue = document.getElementById("selectBox").value;
  
  // 全てのコンテンツを非表示にする
  var contents = document.getElementsByClassName("content");
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }

  // 選択されたコンテンツを表示
  if (selectedValue) {
    document.getElementById(selectedValue).style.display = "block";
  }
}

この関数では、まずセレクトボックスで選択された値を取得し、その値に基づいて対応するコンテンツのみを表示し、他は非表示にします。

css

CSSを使用して、コンテンツの表示スタイルを調整することもできます。例えば、表示されるコンテンツに枠線やパディングを追加することで、より魅力的なUIを実現できます。

.content {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}

まとめ

セレクトボックスの選択に基づいて表示内容を動的に変更する機能は、ユーザーエクスペリエンスを向上させるための有効な手段です。HTML、CSS、JavaScriptを組み合わせることで、このようなインタラクティブな機能を簡単に実装することができます。この記事で紹介した基本的なテクニックをマスターすれば、さらに複雑な動的なUIの開発にも応用することが可能です。