セレクトボックスの選択肢によって、テキストを切り替える方法。

2024年12月24日

セレクトボックスで選択した内容によって、表示テキストを変えたい。

最近セレクトボックスで選択した内容によって、テキストを変えるという実装をしました。

changeイベントを使えば簡単に実装できるですが、少し詰まったのでまとめます。

実装例

まずは実装例をご覧ください。
セレクトボックスで歌手名を選ぶと、下部にあるテキストが変わります。
(※自分はBUMPが好きです。)

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

こんな風に選択肢によって注意書きが変わったり、確認テキストを表示する実装はよくあります。

次の章で解説をします。

解説

①HTML

<h2>選択肢によってテキストを変更</h2>
<label for="option-select">好きな歌手は？</label>
<select id="option-select">
  <option value="">選択してください</option>
  <option value="bump">BUMP OF CHICKEN</option>
  <option value="rad">RAD WIMPS</option>
  <option value="greeeen">GreeeeN</option>
</select>
<p id="display-text">ここに内容が表示されます。</p>

・optionを増やすことで選択肢を増やせます。
・valueに一意のIDをつけます。
・display-textの部分をjsでテキストを切り替えます。

②javascript

onst selectBox = document.getElementById('option-select');
const displayText = document.getElementById('display-text');

// changeイベントを追加
selectBox.addEventListener('change', () => {
  switch (selectBox.value) {
    case 'bump':
      displayText.textContent = '私はBUMP OF CHICKENが好き';
      break;
    case 'rad':
      displayText.textContent = '私はRAD WINPSが好き';
      break;
    case 'greeeen':
      displayText.textContent = '私はGreeeeNが好き';
      break;
    default:
      displayText.textContent = 'ここに内容が表示されます。';
  }
});

・selectBoxにchangeイベントをつけて、値が切り替わるたびに処理を発生させる。
・swich文で、HTMLに設定したvalueの値によってテキストを切り替える。
・.textContent = “文字列”で中身の文字を変える。

changeイベントって何？

changeイベントは、selectボックス以外でもinputやcheckボックスなどフォーム要素全般で使えるイベントです。

発生タイミング
・select→値が切り替わった時
・input/textarea→フォーカスを外した時
・checkbox→チェックが切り替わった時

バリデーションの設定などでよく使われます。

以上です。