擬似プルダウン アイコンを表示
アイコン付きの擬似プルダウンを生成
jQuery
$(function () {
$('#choice').click(function() {
// プルダウン開閉
$('#list').slideToggle('fast');
});
$('input[type=radio]').click(function() {
// 選択時のclassを解除
$('li').removeClass('selected');
// 選択時のclassを設定
$('input[type=radio]:checked').parent().addClass('selected');
// 擬似選択肢にアイコンと文字列を設定
var label = $('label[for=' + $('input[type=radio]:checked').attr('id') + ']').html();
$('#choice').html(label);
// 選択後閉じる
$('#list').slideUp('fast');
});
});
CSS
#choice {
width: 120px;
border: solid 1px #a5acb2;
}
#list {
z-index:1;
position:absolute;
display: none;
width: 120px;
border: solid 1px #a5acb2;
background: #fff;
}
.selected {
color: #fff;
background-color: #3399fe;
}
input[type=radio] {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
opacity: 0;
}
.icon {
display: inline-block;
margin: 2px 4px;
width: 15px;
height: 15px;
border: solid 1px #ccc;
}
label {
display: block;
width: 120px;
}
#wht_icon {
background-color: #fff;
}
(略)
#sil_icon {
background-color: #c0c0c0;
}
HTML
<form>
<div id="choice">選択してください</div>
<ul id="list">
<li><input type="radio" id="wht" name="color" value="1"><label for="wht"><span id="wht_icon" class="icon"> </span>ホワイト</label></li>
<li><input type="radio" id="gry" name="color" value="2"><label for="gry"><span id="gry_icon" class="icon"> </span>グレー</label></li>
<li><input type="radio" id="blk" name="color" value="3"><label for="blk"><span id="blk_icon" class="icon"> </span>ブラック</label></li>
（略）
<li><input type="radio" id="brn" name="color" value="12"><label for="brn"><span id="brn_icon" class="icon"> </span>ブラウン</label></li>
<li><input type="radio" id="gld" name="color" value="13"><label for="gld"><span id="gld_icon" class="icon"> </span>ゴールド</label></li>
<li><input type="radio" id="sil" name="color" value="14"><label for="sil"><span id="sil_icon" class="icon"> </span>シルバー</label></li>
</ul>
</form>
サンプル
