select下拉选菜单HTML,jQuery实现非常实用漂亮的select下拉菜单选择效果

本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：

先来看如下运行效果截图：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

实用漂亮的select下拉菜单

body{font-size:12px;}

.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(images/selectbg.jpg) right 0px no-repeat;color:#fff;}

.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}

ul{list-style:none;margin:0;padding:0;}

ul li{height:24px;background:#666px;text-align:center;}

$(document).ready(function(){

var selects=$("#select");

var options=$("#option");

var state=true;

selects.click(function(){

if(state){

if(!($(this).is(":animated"))){

options.slideDown();

}else{

options.css("display","none");

}

state=false;

}else{

if(!($(this).is(":animated"))){

options.slideUp();

}else{

$(this).stop(true,true);

options.css("display","");

}

state=true;

}

});

selects.hover(function(){

$(this).css("background","url(images/selectbg2.jpg) right 0px no-repeat");

},

function(){

$(this).css("background","url(images/selectbg.jpg) right 0px no-repeat");

});

$("li").hover(function(){

$(this).css("background","#990000").css("color","#ff9900");

},

function(){

$(this).css("background","#820014").css("color","#fff");

});

$("li").click(function(){

$(this).css("background","#c00").css("color","#ffffff");

options.css("display","none");

selects.children("span").text($(this).attr("tip"));

$(".valt").val($(this).attr("tip"));

state=false;

});

options.click(function(){

selects.click(function(){return false;});

});

})

预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

您的选择是：

请选择分类

• 推荐课程
• 资讯中心
• 辅导专区
• 公职考试
• 司法考试
• 报关、报检员
• 高考辅导
• 招生简章
• 招生信息
• 学员专区
• 公计培训
• 名师团队
• 辅导教材

希望本文所述对大家jQuery程序设计有所帮助。