Canvas内の画像をセレクトボックスで切り替えたい

Question

前提・実現したいこと

前提として、現在はCanvas内での画像切り替えをラジオボタンで行っており、
正常に動作させることはできています。
実現したいこととしては、画像切り替えをラジオボタンではなくセレクトボックスで行いたいです。

発生している問題・エラーメッセージ

問題としては、セレクトボックスの中身を変えても画像自体表示されず、切り替えも行えていない状況です。

該当のソースコード

変更前（ラジオボタン）

<form name="select">
  <input id="btn1" value="btn1" name="stamp"  type=radio onclick=loadImage(1)>
  <label for="btn1">A</label>
  <input id="btn2" value="btn2" name="stamp"  type=radio onclick=loadImage(2)>
  <label for="btn2">B</label>
  <input id="btn3" value="btn3" name="stamp"  type=radio onclick=loadImage(3)>
  <label for="btn3">C</label>
  <input id="btn4" value="btn4" name="stamp"  type=radio onclick=loadImage(4)>
  <label for="btn4">D</label>
</form>

変更後（セレクトボックス）

<form name="select">
  <select name="stamp">
    <option id="btn1" value="btn1" onchange=loadImage(1)>A</option>
    <option id="btn2" value="btn2" onchange=loadImage(2)>B</option>
    <option id="btn3" value="btn3" onchange=loadImage(3)>C</option>
    <option id="btn4" value="btn4" onchange=loadImage(4)>D</option>
  </select>
</form>

function loadImage(img) {
 	var img = img - 1;
  	var img2 = ['画像１','画像２','画像３','画像４'];
  	var canvas = document.getElementById('preview');
  	var ctx = canvas.getContext('2d');
  	var image = new Image();
  	image.src = img2[img];
  	image.onload = function(){
		canvas.width = image.width;
		canvas.height = image.height;
  		ctx.drawImage(image, 0, 0);
  	}
}

試したこと

JavaScriptを使用したセレクトボックスの動きなどを様々なサイトで調べ参考にしました。

補足情報（FW/ツールのバージョンなど）

画像自体の表示も上手くいかず悩んでいる状態です。
また、onchangeでの画像切り替えは正しいのでしょうか？
この問題についてわかる方がいましたらご教授いただければ幸いです。

Answer 1

<option>からchangeイベントが発火することはありません。<select>のchangeイベントを扱う必要があります。

<select name="stamp" onchange="loadImage(this.selectedIndex+1)">

---

onイベント名 属性は一般的によろしくない書き方で、addEventListener('change', ...) のほうが好ましいです。

Comments

[siokara]

int32_t さん　回答ありがとうございます。
無事に解決することができました！
onイベントはあまりよくないんですね...今後は書き方に気を付けていきます！