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

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

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-select-choose-style-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题实用漂亮的挑选下拉菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS '正文{ font-size :12 px}.选择{ width :150 pxh three :24 px线高：24 px位置：相对；文本对齐：居中；光标：指针指针；背景： URL(图片/选择BG。jpg)右0px无重复；color: # fff}。选项{行高：24 px宽度宽度：150像素位置：绝对；top :24 pxleft :0 pxdisplay : none背景技术： # 820014;} ul { list-style :无；余量：0划水：0;} ul li { height:24px背景# 666px文本对齐：居中；}/style脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var select=$(' # select '))；var options=$(" # option ")；定义变量状态=真；选择。单击(function(){ if(state){ if(！($(这个)。is(' :动画'){ options。向下滑动()；}else{ options.css('display '，' none ')；} state=false}else{ if(！($(这个)。is(' :动画'){ options。向上滑动()；}else{ $(this).停止（真，真);options.css('display '，' ')；}状态=真；} });选择。悬停(函数(){ $(this)).css(“”背景，' URL(图像/选择bg 2。jpg)右0px无重复')；}，function(){ $(this).css(“”背景，' URL(图像/选择bg。jpg)右0px无重复')；});$('li ').悬停(function(){ $(this)).css(“”背景',' #990000 ')。css('color '，' # ff 9900 ')；}，function(){ $(this).css(“”背景',' #820014 ')。css('color '，' # fff ')；});$('li ').单击(function(){ $(this)).css(“”背景，' #c00 ').css('color '，' # ffffff ')；options.css('display '，' none ')；选择。儿童.文本($(这个).attr(' tip ')；$('.valt ').瓦尔($(这个).attr(' tip ')；state=false })；选项。单击(function(){ selections。单击(function(){ return false；});});})/剧本/床头柜预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题br。您的选择是：输入类型=' text ' class=' valt ' value=' div class=' select ' id=' select ' span请选择分类/span div class=' option ' id=' option ' ul Li tip='推荐课程'推荐课程/li li tip='资讯中心'资讯中心/li li tip='辅导专区'辅导专区/li li tip='公职考试'公职考试/li li tip='司法考试'司法考试/li li tip='报关、报检员'报关、报检员/li li tip='高考辅导'高考辅导/li li tip='招生简章'招生简章/li li tip='招生信息'招生信息/li li tip='学员专区'学员专区/li li tip='公计培训'公计培训/li li tip='名师团队'名师团队/li li tip='辅导教材'辅导教材/li /ul /div/div/body/html希望本文所述对大家jQuery程序设计有所帮助。