div模拟选择框示例代码

超文本标记语言原有标签可以满足我们需求，有时为了使界面更加美观，就需要自己写出来一些列标签供使用，这次项目就有这个要求了，模拟选项框复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312'/titleul模拟选择/标题脚本类型=' text/JAVAScript ' src=' http : jquery-1。8 .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} .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(thisul。高度()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。淡出(“快速”)；} }) });/script/head body div class=' select _ box ' input id=' my select ' type=' text ' value='请选择.readonly=' readonly ' ul class=' select _ ul ' Li 2013年/li li2012年/li li2011年/li li2010年/li li2009年/li li2008年/li li2007年/li li2006年/li li2005年/li li2013年2013年2013年2013年2013年/Li/ul/分区选择样式='边距-顶部：250像素；选项2013年/option options 2012年/option options 2011年/option options 2010年/option options 2009年/option options 2008年/选项/选择/正文/html两个效果进行比较