セレクトボックスの項目を変えることで実行する処理や関数を変更したかったときの備忘録
※セレクトボックスを変更したタイミングで即時発火

セレクトボックスで実行する処理を切り分けるコード

ざっくり「二つの処理」と「実行する処理を切り替える関数」で構成している

• セレクトボックスが最初に選択している要素を実行する処理
• セレクトボックスを変更した時に実行する処理
• 実行する処理を切り分ける関数

<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;  
    alert('「' + text + '」は登録されてないよ');
  }
}
</script>

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

デモ