SQL見るだけクエリ#208 動的な選択肢連携フォームの実装の仕方

動的な選択肢連携フォームの実装の仕方に関して解説をしてみようと思います。

この記事を読むと（約5分）
動的な選択肢連携フォームの実装の仕方をイメージできます。

動的な選択肢連携フォームの実装

以下のコードはフォームに動的な入力フィールドを追加する仕組みを作成しています。

<form>
  <label for="first-choice">第1の選択肢:</label>
  <select id="first-choice">
    <option value="option1">選択肢1</option>
    <option value="option2">選択肢2</option>
    <option value="option3">選択肢3</option>
  </select>

  <div id="second-choice-container">
  <!-- 第2の選択肢はここに追加されます -->
  </div>
</form>


 
<script>
// 第1の選択肢の要素を取得
const firstChoice = document.getElementById('first-choice');

// 第2の選択肢を追加するコンテナ要素を取得
const secondChoiceContainer = document.getElementById('second-choice-container');

// 第1の選択肢が変更されたときに実行される関数
function onFirstChoiceChange() {
  // 第2の選択肢をクリア
  secondChoiceContainer.innerHTML = '';

  // 第1の選択肢の値を取得
  const firstChoiceValue = firstChoice.value;

  // 第1の選択肢の値に応じて第2の選択肢を作成
  switch (firstChoiceValue) {
    case 'option1':
      createSecondChoice(['選択肢1-1', '選択肢1-2', '選択肢1-3']);
      break;
    case 'option2':
      createSecondChoice(['選択肢2-1', '選択肢2-2']);
      break;
    case 'option3':
      createSecondChoice(['選択肢3-1', '選択肢3-2', '選択肢3-3', '選択肢3-4']);
      break;
    default:
      break;
  }
}

// 第2の選択肢を作成する関数
function createSecondChoice(options) {
  const secondChoiceSelect = document.createElement('select');

  for (const option of options) {
    const optionElement = document.createElement('option');
    optionElement.textContent = option;
    secondChoiceSelect.appendChild(optionElement);
  }

  secondChoiceContainer.appendChild(secondChoiceSelect);
}

// 第1の選択肢の変更を監視
firstChoice.addEventListener('change', onFirstChoiceChange);

// 初期状態で第1の選択肢に応じた第2の選択肢を表示
onFirstChoiceChange();
</script>

このコードは、HTMLフォームとJavaScriptを使用して、2つの選択肢間の関連性を実現する動的な選択肢の作成と表示を行っています。具体的には、ユーザーが第1の選択肢を選択すると、それに応じて自動的に第2の選択肢が更新され、新しい選択肢を選択できるようになります。

HTML部分では、<form>要素が作成され、その中に第1の選択肢を表示する<select>要素が配置されています。<select>要素内には、3つの選択肢が<option>要素として定義されています（選択肢1、選択肢2、選択肢3）。また、第2の選択肢を表示するためのコンテナとして<div>要素が用意されています。

JavaScript部分では、ページ読み込み時に実行される初期化関数があります。この初期化関数は、第1の選択肢の値に基づいて第2の選択肢を作成し、表示するために呼び出されます。

ユーザーが第1の選択肢を変更すると、onFirstChoiceChange()関数が実行されます。この関数は、まず第2の選択肢をクリア（空にします）し、次にユーザーが選択した第1の選択肢の値を取得します。その値に応じて、switch文を使って選択肢に応じた第2の選択肢を作成します。

createSecondChoice(options)関数は、引数として渡されたオプションの配列に基づいて、新しい<select>要素を作成します。オプションの数に応じて、<option>要素が作成され、<select>要素内に追加されます。この関数を使って、第1の選択肢に応じた第2の選択肢がコンテナに表示されます。

さらに、addEventListenerを使って第1の選択肢にchangeイベントリスナーを登録しています。これにより、ユーザーが第1の選択肢を変更するたびにonFirstChoiceChange()関数が呼び出され、関連する第2の選択肢が更新されます。

最後に、初期状態でonFirstChoiceChange()関数を呼び出すことで、ページ読み込み時に第1の選択肢に応じた第2の選択肢が初めから表示されるようになります。

この仕組みにより、ユーザーは第1の選択肢を変更するだけで、第2の選択肢が動的に変化し、関連性のある選択肢を選ぶことができるようになります。