HTML form selectメニューの中の文字列にカーソルが当たった際のイメージ表示方法

HTML form selectボックスにおいて

selectメニューの中の文字列にカーソルが当たった際に、
イメージを表示させる方法はありますでしょうか？
ーーーーー
犬
猫
ウサギ
ーーーーー
とあった場合、犬にカーソルを合わせると犬の画像が表示されるという様なことです。
猫・ウサギもそれぞれ同様です。

どのようにすべきでしょうか？
宜しくお願いします！！

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

回答1件

ベストアンサー

こんな感じです

javascript
1$(function(){
2  $('select[name=animal]').on('change',function(){
3    var imglist={"犬":"dog.jpg","猫":"cat.jpg","ウサギ":"rabbit.jpg"};
4    $('#viewarea img').remove();
5    if(typeof imglist[$(this).val()]!=="undefined"){
6      $('#viewarea').append($('<img>').attr('src',imglist[$(this).val()]));
7    }
8  }).trigger('change');
9});

HTML
1<select name="animal">
2<option value="犬">犬</option>
3<option value="猫">猫</option>
4<option value="ウサギ">ウサギ</option>
5<option value="不明">不明</option>
6</select>
7<div id="viewarea"></div>

投稿2017/12/03 08:24

yambejp

総合スコア114761

vibrato

2017/12/03 14:16

yambejp様　回答ありがとうございます！試してみましたところ「選択(クリック)をすると」画像が表示されました。 ↑この知識自体も無かったのでとても勉強になったのですが、「カーソルが当たった際に(クリックせずとも)」画像が表示される ↑が希望の動作でした。せっかく教えていただいたのに失礼とは思いますが、上記の希望が叶う方法があれば教えていただきたいです。是非とも宜しくお願い致します。