jquery使用保险商实验所模拟挑选实现表单美化的方法

本文实例讲述了jquery使用保险商实验所模拟挑选实现表单美化的方法。分享给大家供大家参考。具体如下：

这里使用jquery实现保险商实验所模拟选择，是jQuery插件实现的挑选下拉菜单效果，类似的功能网上已经有一些了，每一款都代表了不同的编程思路，为学习提供一份参考。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-ul-select-table-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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titleul模拟select/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS '！- .select _ box { width:150px位置：相对；margin:10px划水：0;font-size :12 px}.submit _ box { width:180px位置：相对；margin:10px划水：0;font-size :12 px文本对齐：居中；}ul，Li { list-style-type : none；划水：0;保证金：0英镑.select _ box输入{光标：指针；显示：块；线高：25 px宽度：100%;高度：25px飞越：隐藏；border:1px固体# ccc填充-右侧：20 px填充-左侧：10 px背景： URL(选择_输入_ BG。gif)无重复160px中心；}.select _ box ul { width:180px位置：绝对；left :0 top :25 pxborder :1 px固体# ccc背景# fff飞越：隐藏；display : none background : # ebebebz-index :99999；}.select _ box ul Li {显示：块；高度：30 px飞越：隐藏；线高：30 px左衬垫：5 px宽度：100%;光标：指针指针；}.悬停{ background: # ccc}-/style脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).选择框输入').单击(function(){ var this input=$(this)；var thisul=$(this).父项()。find(' ul ')；if(thisul。CSS(' display ')==' none '){ if(this ul。高度()200){ thisul。CSS({ height : ' 200 ' ' px '，' overflow-y ' : ' scroll ' })}；这个。淡入(' 100 ')；thisul.hover(function(){}，function(){ thisul。淡出(' 100 ')；}) thisul.find('li ').单击(function(){此输入。瓦尔($(这个)).text())；这个。淡出(' 100 ')；}).悬停(function(){$(this)).addClass(')悬停');}，function(){$(this).removeClass(“”悬停');});} else { thisul。淡出(“快速”)；} })$(“# submit”).click(function(){ var endinfo=' '；$('.select_box input:text ').每个（函数(I){ end info=end info(I 1)' : ' $(this).val()'；\ n '；})警报(结束信息)；})});/script/head body div class=' select _ box ' input id=' my select ' type=' text ' value='请选择.readonly=' readonly ' ul class=' select _ ul ' Li选项一/li li选项二/li li选项三/li li选项四/li li选项五/Li/ul/div class=' select _ box '输入id=' my select '类型=' text '值='请选择.readonly=' readonly ' ul class=' select _ ul ' Li选项一/li li选项二/Li/ul/div class=' select _ box '输入id=' my select '类型=' text '值='请选择.readonly=' readonly ' ul class=' select _ ul ' Li选项一/li li选项二/li li选项三/li li选项四/li li选项五/li li选项一/li li选项二/li li选项三/li li选项四/li li选项五选项五选项五选项五选项五/Li/ul/div class=' submit _ box '输入类型=' button ' id=' submit '值='提交数据//div/body/html希望本文所述对大家的jquery程序设计有所帮助。