SELECT～OPTIONにIMG表示: ぱぱろぐのこころぐ

2012.03.06

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>

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

----