QQ 1640076782

2014年08月29日

jquery 实现select菜单样式美化

Filed under: 英语网站设计 — 标签: — lifengwu @ 5:54 上午

select下拉菜单效果对我们来说都很熟悉,我们都知道可以通过CSS来修改input文本框、按钮、文本域等很多表单元素的样式,但是要改变select菜单的样式却是不可以的,那如果必须要修改它的样式,怎么样办呢?下面我们就来看看通过jquery是如何实现这个效果的:

这个效果实际上是通过jquery模拟select效果,从而达到能过能css控制其样式

html代码:

<form action=”" method=”post”>
<div id=”divselect”>
<cite>Price Low to Hight</cite>
<ul>
<li><a href=”javascript:;” selectid=”1″>Price Low to Hight</a></li>
<li><a href=”javascript:;” selectid=”2″>Price Low to Hight</a></li>
<li><a href=”javascript:;” selectid=”3″>Price Low to Hight</a></li>
</ul>
</div>
<input name=”" type=”hidden” value=”" id=”inputselect”/>
</form>

<form action=”" method=”post”><div id=”divselect”>      <cite>Price Low to Hight</cite>      <ul>         <li><a href=”javascript:;” selectid=”1″>Price Low to Hight</a></li>         <li><a href=”javascript:;” selectid=”2″>Price Low to Hight</a></li>         <li><a href=”javascript:;” selectid=”3″>Price Low to Hight</a></li>      </ul>  </div>  <input name=”" type=”hidden” value=”" id=”inputselect”/>
</form>

JS:

jQuery.divselect = function(divselectid,inputselectid) {

var inputselect = $(inputselectid);

$(divselectid+” cite”).click(function(){

var ul = $(divselectid+” ul”);

if(ul.css(“display”)==”none”){

ul.slideDown(“fast”);

}else{

ul.slideUp(“fast”);

}

});

$(divselectid+” ul li a”).click(function(){

var txt = $(this).text();

$(divselectid+” cite”).html(txt);

var value = $(this).attr(“selectid”);

inputselect.val(value);

$(divselectid+” ul”).hide();

});

$(document).click(function(){

$(divselectid+” ul”).hide();

});

};

引用:

<script type=”text/javascript”>

$(function(){

$.divselect(“#divselect”,”#inputselect”);

});

</script>

CSS可以根据实际需要来做调整,通常的效果:

美化之后的效果:

当然还有很多其他的方法,这只是其中的一种,实际操作时我们可以选择最适合我们的就可以了!