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>

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可以根据实际需要来做调整，通常的效果：

美化之后的效果：

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