JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでセレクトボックスの選択に応じて非表示のdivを表示・切り替える方法

Webフォームを作成していると、セレクトボックス（select要素）で特定のオプションが選ばれたときだけ、隠しておいたdiv要素を表示したいという場面によく出くわします。

このような動的な表示切り替えは、JavaScriptの「style.display」プロパティを操作することで簡単に実現できます。表示したいタイミングで値を「block」に設定し、非表示にしたいときは「none」に戻すだけでOKです。

実装例

以下に、セレクトボックスで2番目のオプション（Javascript）が選択されたときに、非表示のdivを表示するサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    #hideValuesOnSelect {
      display: none;
    }
</style>
<body>
<select onchange="displayDivDemo('hideValuesOnSelect', this)">
<option value="0">Java</option>
<option value="1">Javascript</option>
</select>
<div id="hideValuesOnSelect">これはJavascriptの領域です</div>
</body>
<script>
    function displayDivDemo(id, elementValue) {
        document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
    }
</script>
</html>

コードのポイント

  • 対象のdiv（#hideValuesOnSelect）には、あらかじめCSSで「display: none;」を指定して非表示にしています。
  • select要素のonchangeイベントで関数「displayDivDemo()」を呼び出します。
  • 三項演算子を使い、選択されたoptionのvalueが「1」（Javascript）であれば「block」を、それ以外なら「none」を設定することで、表示と非表示を切り替えています。

実行方法

上記のコードを「index.html」などの名前で保存し、VS Codeを使用している場合はファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上でプログラムを実行できます。

実行すると、最初はJavaのみが選択できる状態で画面が表示されます。

出力結果

セレクトボックスで2番目のオプション（Javascript）を選択するたびに、それまで非表示だったdivが画面に現れます。元のオプション（Java）に戻すと、再びdivは非表示になります。

この仕組みを応用すれば、アンケートフォームでの条件分岐や、カテゴリ選択による詳細項目の出しわけなど、さまざまなインタラクティブなUIを実装できます。ぜひ実際にコードを動かして、挙動を確認してみてください。

  1. ドロップダウン（select要素）で選択された値をJavaScriptのコンソールに表示する方法

    Web開発では、ドロップダウン（select要素）でユーザーが選択した値を取得して処理する場面がよくあります。本記事では、選択された値をJavaScriptのコンソールに表示する方法を、具体的なコード例とともに解説します。ドロップダウンのHTML例まず、以下のようなドロップダウン（select要素）を用意します。ここでは、onchangeイベントを使って、選択が変更されるたびに関数を呼び出す構成にしています。<select onchange=selectedSubjectName() id=subjectName>    <option>J

  2. JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

    Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した