html
<p id="select_box"> <dl id="types"> <dt><span id="select_type">請選擇</span></dt> <dd>百貨</dd> <dd>生活用品</dd> <dd>電腦外設</dd> <dd>數位產品</dd> </dl></p>
css
a{ text-decoration: none;}#select_box{ position: relative; top: 10px; left: 0px; display: inline-block; width: 192px;}#select_box dl{ float: left; width: 192px; height: 32px; background: #FFFFFF; cursor: pointer; z-index: 100;}#select_box dl dt{ width: 172px; height: 32px; line-height: 34px; font-size: 1em; color: #fff; background:url(../img/select_bg.png) no-repeat center right; background-color:rgb(60,179,113); margin: 0; padding-left: 20px;}#select_box dl dd{ position: relative; left: -40px; width: 172px; height: 32px; line-height: 32px; font-size: .9em; color: #FFFFFF; background: #2A8F57; padding-left: 20px; z-index: 10;}
jQuery
$(function(){ $("#types dd").hide(); $("#select_box").toggle(function(){ $("#types dd").stop(true,false).slideDown(200); },function(){ $("#types dd").stop(true,false).slideUp(200); }); $("#types dd").click(function(){ var type_val=$(this).html(); $("#types dt").html(type_val); $("#types dd").stop(true,false).slideUp(200); }); })
如果是作為select組件使用,可以添加form表單和隱藏欄位(type=”hidden”),使用jQuery控制向input中寫值,或者控制form表單提交。