selectで選んでいる値を取得

Question

selectタグで選んでいる値に応じてメッセージを出そうと思ってます。

<div id =hoge><span></span>
 <select name = num>
  <option value="1">1</option>　
  <option value="2">2</option>
  <option value="3">3</option>
 </select>
</div>

var hoge = document.getElementById("hoge").value;

???

プルダウンで選んだら、１だったらすぐ用意しておいたaというメッセージを表示して2だったらb,3だったらcというメッセージを表示させたいです。

Comments

[退会済みユーザー]

jQuery は使用不可ですか？

[m.ts10806]

検索して何も引っ掛かりませんか？

[kei344]

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

[x_x]

「選んだら動くようにする方法」、「選んだ値の取得」、「値の変換」、「メッセージ表示方法」のどこでつまずいているのでしょう？

Answer 1

こうしてみてください

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var message={1:"a",2:"b",3:"c"};
  document.querySelector('#hoge select').addEventListener('change',function(e){
    if(typeof message[e.target.value]!=="undefined"){
      alert(message[e.target.value]);
    }
  });
});
</script>
<div id="hoge"><span></span>
 <select name ="num">
  <option value="">-</option>　
  <option value="1">1</option>　
  <option value="2">2</option>
  <option value="3">3</option>
 </select>
</div>