セレクトボックスの内容が取得できません

テキストエリアならば内容が取得できるのですが
https://jsfiddle.net/4p82unvy/

php
1<div>
2<input type="text" name="input" id="input">
3</div>
4
5<p>▼ここに選択内容が表示される</p>
6<div id="response"></div>
7<p>▲ここに選択内容が表示される</p>
8        
9<script type="text/javascript">
10var input = document.getElementById('input');
11input.addEventListener('keyup', function () {
12var response = document.getElementById('response');
13response.textContent = this.value;
14});
15</script>

なぜかセレクトボックスの内容が取得できません。
https://jsfiddle.net/5foc7ch9/

php
1<select id="need" name="nanashi" data-required="yes" data-type="select">
2<option value="a" selected="selected">中身A</option>
3<option value="b">中身B</option>
4<option value="c">中身C</option>
5</select>
6
7<p>▼ここに選択内容を表示させたい</p>
8<div id="response"></div>
9<p>▲ここに選択内容を表示させたい</p>
10
11<script type="text/javascript">
12var select = document.getElementById('need');
13select.addEventListener('keyup', function () {
14var response = document.getElementById('response');
15response.textContent = this.value;
16});
17</script>

セレクトボックスの場合は、何か根本的に変わるのでしょうか？
お詳しい方いらっしゃいましたら宜しくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

addEventListener の対象にするイベントを、
keyupではなく、changeにするとよいでしょう。

以下のようになります。

https://jsfiddle.net/jun68ykt/q40jrtmv/1/

投稿2018/01/01 06:00

jun68ykt

総合スコア9058

退会済みユーザー

2018/01/01 06:02

おおお！いつもありがとうございます！いろいろな関数があるのですね。あと、ちょっと不躾な追加質問ですみません。はじめにAを選択しているときも、それが出力されるようには、、できませんでしょうか？ヒントなどでも嬉しいです。

jun68ykt

2018/01/01 06:41

> おおお！いつもありがとうございます！いろいろな関数があるのですね。 keyup や change は「イベント」と呼ばれるものです。「イベント」には、これら2つの他にもまだたくさんあります。すべてのイベントのリストは、以下などを見ておくとよいでしょう。イベントリファレンス https://developer.mozilla.org/ja/docs/Web/Reference/Events > はじめにAを選択しているときも、それが出力されるようには、、できませんでしょうか？できますよ。いろいろな書き方で出来ると思いますが、たとえば以下のようにします。 (わかりやすく、Bを selected にしました） https://jsfiddle.net/jun68ykt/q40jrtmv/5/ 上記のコードでは、 select.addEventListener でselect に設定する関数(値)と、 window.onloadで実行させたい関数(値)とは、同じことをさせたいので、それぞれに書かず、changeResponse を定義して、上記の2カ所で使うようにしています。余談ですが、このchangeResponseは、実行されるときも、関数本体ブロックの外側にある、select やresponseへの参照を保持しているので、期待どおりの動作をしてくれるのですが、このような性質をもつ関数(値)のことを「クロージャー」といいます。

退会済みユーザー

2018/01/01 07:15

感涙です。調べてみたらどのイベントも「変化があったときの発火」のようで、途方に暮れておりました。そのような書き方になるのですね。難しい…笑細かいご説明から余談まで、本当に、どうもありがとうございます!! ところでビットコインアドレスってお持ちですか？ほんの気持ちの千円だけお送りしたいのですが…

退会済みユーザー

2018/01/01 07:43

ところで… ところでなんですけれど、 id="need" を class="need" にできませんでしょうか？(^▽^;) getElementById を getElementsByClassName にしてみたりしたのですけれど、反応してくれないのです。。これについてご返信なくとも、ビットコインアドレスだけ貼ってくださればお送りしておきます。

jun68ykt

2018/01/01 08:52 編集

> getElementsByClassName > にしてみたりしたとのことですが、（別の質問でも、他の回答者さんが指摘されていたように、）単に、getElementById をgetElementsByClassNameに置き換えるだけではだめで、 getElementsByClassName("need")[0] と、[0] をつけないとダメですが、 [0] はついてますか？ > ビットコインアドレスってお持ちですか？ほんの気持ちの千円だけお送りしたいのですが… については、大変光栄ですし、なかなか殊勝な心がけだと思います。ですが、お金を受け取るわけにもいきませんから、まあ、いつかお会いする機会でもあれば、せんべろ居酒屋で生ビールの一杯でもご馳走してくれればけっこうでございます（笑）もっといいのは、matsuzakaqさんがプログラミングに上達して、今、私や他の回答者さんがmatsuzakaqさんに無償であれこれお教えしているのと同じように、matsuzakaqさんが、こんどは他の誰かに、特に見返りを求めずに指導できるようになることです。頑張ってください。

退会済みユーザー

2018/01/01 09:03

そうですね。むしろ「千円で売らない」という心がけこそクールなプロ根性だと思います。差し出がましくてすみませんでした。しかし、サイテーでした。検索すればすぐ出ました↓ http://nymemo.com/javascript/1408/ 「ついでに聞いちゃえ」的な甘えが丸出しのところ、よくお叱りにならずにいてくれましたね。汗回答できるもの、、かつて２、３個あったような。がんばります(>_<) 本当に何度もありがとうございます。

jun68ykt

2018/02/27 03:29

いつか、ビールご馳走して頂くのを愉しみにしておりますですよ（微笑）

行動規範の内容に同意します