昨天分享了radio and checkbox的美化文章，，今天我们来学习下select下拉菜单的美化文章。

先来看下这个美化后的效果图吧：看着是不是有种似曾相识的赶脚？其实这个就是艺灵网站改版后的搜索表单中的一部分。下面我们还是先来对这个效果进行分析下吧。

效果分析：鼠标滑过下拉菜单时，弹出下拉选项；当鼠标重新选择值后，默认文本进行替换，在替换的同时，下拉选项进行隐藏。

我们还是先在dreamweaver中实现静态布局吧。

美化select的html

<form action="" method="post" class="searchw">
 
<div class="selectw">
 
<span id="menu-key">淘宝经验</span>
 
<ul id="menu-select" class="none">
 
<li >flash动画</li><li>div+css</li><li >css3特效</li><li>html5</li><li>jquery特效</li><li value="106">淘宝经验</li><li >在线生成</li><li >艺灵随笔</li><li >资源下载</li>
 
</ul>
 
</div>
 
<select name="classid" class="none" id="select"><option >flash动画</option><option>div+css</option><option >css3特效</option><option>html5</option><option>jquery特效</option><option value="106" selected="selected">淘宝经验</option><option >在线生成</option><option >艺灵随笔</option><option >资源下载</option></select>
 
<input name="keyboard" type="text" placeholder="艺灵设计--百度一下" class="keywords" maxlength="20">
 
<input type="submit" name="submit" value="搜索" class="ico submit">
 
</form>
demo1

美化表单css

/*美化表单css*/
.searchw{position:relative;width:320px;height:36px;line-height:36px;border:2px solid #dbe3ed;top:50%;font-size:12px}
.searchw .selectw{width:110px;position:relative;float:left;border-right:2px solid #dbe3ed;cursor:default;text-indent:20px}
.selectw:before{content:"∨";position:absolute;right:10px;top:2px;font-size:12px}
.selectw ul{position:absolute;left:-2px;top:36px;z-index:100;background-color:rgba(255,255,255,.9);border:2px solid #dbe3ed;width:110px;text-indent: 0;}
.searchw .keywords{float:left;margin-top:6px;width:170px;border-width:0 1px 0 0;text-indent: 10px;}
.searchw .submit{background:url(../2015-06-20/input-radio-checkbox.png) no-repeat -2px -162px;background-color:transparent;float:left;height:36px;border:0;color:transparent;padding-left:0; cursor:pointer}
/*纵向菜单*/
#menu-select li{height:30px;line-height:30px;width:100%;text-align:center;background-color:rgba(255,255,255,.9);color:#444;display:inline-block;-webkit-transition:.5s;transition:.5s;}
#menu-select li:hover{background-color:#220d3d;color:#fff}

当你点击上面的demo1后会看到美化后的静态效果，当你再点击“淘宝经验”时会发现无法弹出下拉菜单。这个时候可能懂点css的看官会说了，写一个.selectw:hover .menu-select{}不就完了么。话虽如此，但如果你真的这么做了，在你进行取值时你就会发现新的问题。至于是什么问题，自己动手尝试下吧。

那么这个下拉应该怎么做呢？这时我们需要用到jquery了，一是为了切换显隐状态；二是为了时时传值。

jquery

$(function(){
/*select下拉菜单美化*/
//缓存变量
var $selectw=$('.selectw');
var $menu_s=$('#menu-select');
var $select=$('#select');
$selectw.on({//绑定事件
mouseover:function(){//鼠标滑过触发
$menu_s.removeClass('none');},//下拉菜单移除隐藏样式
mouseleave:function(){//鼠标离开触发
$menu_s.addClass('none');} //下拉菜单增加隐藏样式
}).find('li').on('click',function(){//点击下拉菜单事件
var $li_i=$(this).index();//记录点击的索引
$('#menu-key').text($(this).text());//传值
$select.find('option').removeAttr('selected').eq($li_i).attr('selected',true);//默认的下拉菜单进行同步操作
$menu_s.addClass('none');//传值完后下拉菜单立即隐藏
});
});
demo2

这个时候当你点击demo2后，在这个页面中再滑过下拉菜单时就可以进行自由选择了。(完)

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-06-21/280.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。