擬似複数選択プルダウン アイコンを表示
アイコン付きの擬似複数選択プルダウンを生成
jQuery
$(function () {
$('input[type=checkbox]').click(function() {
// 選択時のclassを解除
$('input[type=checkbox]:not(:checked)').parent().removeClass('selected');
// 選択時のclassを設定
$('input[type=checkbox]:checked').parent().addClass('selected');
});
});
CSS
#list {
width: 120px;
height: 180px;
border: solid 1px #a5acb2;
overflow-y: scroll;
}
.selected {
color: #fff;
background-color: #3399fe;
}
input[type=checkbox] {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
opacity: 0;
}
label {
display: block;
width: 100px;
}
.icon {
display: inline-block;
margin: 2px 4px;
width: 15px;
height: 15px;
border: solid 1px #ccc;
}
#wht_icon {
background-color: #fff;
}
#gry_icon {
background-color: #808080;
}
#blk_icon {
background-color: #000;
}
#red_icon {
background-color: #f00;
}
#org_icon {
background-color: #ffa500;
}
#yel_icon {
background-color: #ff0;
}
#grn_icon {
background-color: #008000;
}
#blu_icon {
background-color: #00f;
}
#pur_icon {
background-color: #800080;
}
#pnk_icon {
background-color: #ffc0cb;
}
#beg_icon {
background-color: #f5f5dc;
}
#brn_icon {
background-color: #a52a2a;
}
#gld_icon {
background-color: #ffd700;
}
#sil_icon {
background-color: #c0c0c0;
}
input[type=checkbox] を display: none; にするとIE8でチェックボックスが機能しなくなる。
HTML
<form>
<ul id="list">
<li><input type="checkbox" id="wht" name="wht" value="1"><label for="wht"><span id="wht_icon" class="icon"> </span>ホワイト</label></li>
<li><input type="checkbox" id="gry" name="gry" value="1"><label for="gry"><span id="gry_icon" class="icon"> </span>グレー</label></li>
<li><input type="checkbox" id="blk" name="blk" value="1"><label for="blk"><span id="blk_icon" class="icon"> </span>ブラック</label></li>
<li><input type="checkbox" id="red" name="red" value="1"><label for="red"><span id="red_icon" class="icon"> </span>レッド</label></li>
<li><input type="checkbox" id="org" name="org" value="1"><label for="org"><span id="org_icon" class="icon"> </span>オレンジ</label></li>
<li><input type="checkbox" id="yel" name="yel" value="1"><label for="yel"><span id="yel_icon" class="icon"> </span>イエロー</label></li>
<li><input type="checkbox" id="grn" name="grn" value="1"><label for="grn"><span id="grn_icon" class="icon"> </span>グリーン</label></li>
<li><input type="checkbox" id="blu" name="blu" value="1"><label for="blu"><span id="blu_icon" class="icon"> </span>ブルー</label></li>
<li><input type="checkbox" id="pur" name="pur" value="1"><label for="pur"><span id="pur_icon" class="icon"> </span>パープル</label></li>
<li><input type="checkbox" id="pnk" name="pnk" value="1"><label for="pnk"><span id="pnk_icon" class="icon"> </span>ピンク</label></li>
<li><input type="checkbox" id="beg" name="beg" value="1"><label for="beg"><span id="beg_icon" class="icon"> </span>ベージュ</label></li>
<li><input type="checkbox" id="brn" name="brn" value="1"><label for="brn"><span id="brn_icon" class="icon"> </span>ブラウン</label></li>
<li><input type="checkbox" id="gld" name="gld" value="1"><label for="gld"><span id="gld_icon" class="icon"> </span>ゴールド</label></li>
<li><input type="checkbox" id="sil" name="sil" value="1"><label for="sil"><span id="sil_icon" class="icon"> </span>シルバー</label></li>
</ul>
</form>
サンプル
月3~4のペースでポチッとしているんですが、ブランドや色などの絞込みがほとんどのサイトで単数でしか絞込みができず使いにくいです。
某U社を請け負っているシステム屋さん、なんとかしてもらえませんか？
