【javascript】「セレクトボックスの項目」ごとに実行する処理を切り替える方法

「セレクトボックスの項目」ごとにイベントを用意し、「セレクトボックスの項目」が変わったタイミングで設定されている処理を発火させる方法の備忘録

「セレクトボックスの項目」が変更されたタイミングで処理を実行する方法

セレクトボックスの変更を監視するなら、addEventListenerのchange イベントで監視可能。
以下は、codepenで作成したサンプル。

See the Pen
Untitled by twotone (@twotone-me)
on CodePen.

コード全体としては以下のような構成になっている。

<form>
  <select name="function">
    <option value="alert">アラート</option>
    <option value="change">背景変更</option>
    <option value="return">背景を元に戻す</option>
    <option value="">登録なし</option>
  </select>
</form>

<script>
// select要素を取得
var select = document.querySelector("select[name=function]");

// 最初の読み込み時に実行する関数
window.onload = function() {
  selectFunction(select);
};

// selectボックスが変更された時の処理
select.addEventListener('change',function(){
  selectFunction(select);
});

// どの処理を実行するか振り分ける関数
function selectFunction(select){
  let value = select.value;// select要素の値を取得
  if(value == 'alert'){// ↓ アラートを出す
    alert("アラート");
  }else if(value == 'change'){// ↓ 背景を赤に変更する処理を行う
    document.body.style.backgroundColor = 'red';
  }else if(value == 'return'){// ↓ 背景を白に変更する処理を行う
    document.body.style.backgroundColor = 'white';
  }else{// 振り分けに登録されていない値の時
    // ↓ 選択されているoptionの何番目の要素か取得
    let index = select.selectedIndex;
    // ↓ ラベルを取得
    var text  = select.options[index].text;  
    console.log('「' + text + '」は登録されてないよ');
  }
}
</script>

これでセレクトボックスの項目ごとに処理を持たせ、切り替えたタイミングで処理を実行することができる。