擬似プルダウン アイコンを表示

アイコン付きの擬似プルダウンを生成

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">&nbsp;</span>ホワイト</label></li> <li><input type="radio" id="gry" name="color" value="2"><label for="gry"><span id="gry_icon" class="icon">&nbsp;</span>グレー</label></li> <li><input type="radio" id="blk" name="color" value="3"><label for="blk"><span id="blk_icon" class="icon">&nbsp;</span>ブラック</label></li> (略) <li><input type="radio" id="brn" name="color" value="12"><label for="brn"><span id="brn_icon" class="icon">&nbsp;</span>ブラウン</label></li> <li><input type="radio" id="gld" name="color" value="13"><label for="gld"><span id="gld_icon" class="icon">&nbsp;</span>ゴールド</label></li> <li><input type="radio" id="sil" name="color" value="14"><label for="sil"><span id="sil_icon" class="icon">&nbsp;</span>シルバー</label></li> </ul> </form>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。