SELECT～OPTIONにIMG表示

Firefoxでは意図した通りに動いていますが、他は微妙。IEでは選択肢に画像が表示されません。Chromeでは画像は一切表示されません。

実は今まで知らなかったのですが、HTMLでは、素のままでは画像を選択する選択肢って作れないのですね。OPTION要素の中にIMGを置いてもまったく表示されないようで。これってどうしてできなくしてあるんだろ？セキュリティ的にも問題なさそうなんだけど。。。

対処法は、javascriptを使う必要がありますけれど、割と単純。

こんな感じ↓

画像を選択してください 青ドット 赤ドット

各選択肢をあらわすOPTION要素それぞれに背景画像を使えばよろしい（スタイルの指定でコチョコチョしますが）。

単一選択のドロップダウンリストの形式では、ドロップダウンが閉じた後は選択画像が表示されませんから、(SELECT要素の)onchangeで、選択されたOPTIONの背景画像をSELECT要素へ設定してやります。（複数選択の場合はSELECTの背景は不要みたい）

コードはコチラ↓例によってjQuery必要です。

<style type="text/css">
#imgSelect, #imgSelect option {
	background-repeat:no-repeat;
	height:32px;
	padding-left:32px;
}
</style>
<select id="imgSelect">
<option style="background-image:none;">画像を選択してください</option>
<option style="background-image:url(blue-dot.png);">青ドット</option>
<option style="background-image:url(red-dot.png);">赤ドット</option>
<option></option>
</select>
<script type="text/javascript">
jQuery(function($) {
	$('#imgSelect').change(function(){
		var opt = $('#imgSelect option:selected');
		var url = opt.css('background-image');
		$('#imgSelect').css('background-image',url);
	});
});
</script>

問題は、選択肢の画像を小さく出来ない点かな。

----

WEB+DB PRESS Vol.97

posted with amazlet at 17.02.17

外村 和仁 小林 徹 古川 陽介 佐藤 歩 yoku0825 是澤 太志 一野瀬 翔吾 加藤 颯史 のざき ひろふみ うらがみ 水嶋 淳貴 久田 真寛 久保 達彦 伊藤 直也 遠藤 雅伸 ひげぽん 海野 弘成 はまちや2 竹原 倉岡 洋義
技術評論社
売り上げランキング: 1,775

Amazon.co.jpで詳細を見る