jQuery 文本框模拟下拉列表效果

网页代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="dns-prefetch" href="//www.jiangweishan.com"><link rel="dns-prefetch" href="//www.jiangweishan.comsearch.php"><link rel="dns-prefetch" href="//shang.qq.com"><link rel="dns-prefetch" href="//www.w3.org"><link rel="dns-prefetch" href="//img.jb51.net"><link rel="dns-prefetch" href="//www.jb51.net"><link rel="dns-prefetch" href="//files.jb51.net"><link rel="dns-prefetch" href="//www.mockplus.cn"><link rel="dns-prefetch" href="//www.aliyun.com"><link rel="dns-prefetch" href="//pagead2.googlesyndication.com"><link rel="dns-prefetch" href="//weibo.com"><link rel="dns-prefetch" href="//beian.miit.gov.cn"><link rel="dns-prefetch" href="//hm.baidu.com"><link rel="dns-prefetch" href="//www.zblogcn.com"><script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery14.js"></script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>New <a href="https://www.jiangweishan.com/tags/webaa/" target="_blank">WEB</a><a href="https://www.jiangweishan.com/tags/PR/" target="_blank">PR</a>oject</title><script type="text/javascript" language="JavaScript"> $(<a href="https://www.jiangweishan.com/tags/document/" target="_blank">document</a>).ready(<a href="https://www.jiangweishan.com/tags/function/" target="_blank">function</a>(){ $('#test').val(''); //定义一个下拉<a href="https://www.jiangweishan.com/tags/%E6%8C%89%E9%92%AE/" target="_blank">按钮</a>层，并<a href="https://www.jiangweishan.com/tags/%E9%85%8D%E7%BD%AE/" target="_blank">配置</a><a href="https://www.jiangweishan.com/tags/%E6%A0%B7%E5%BC%8F/" target="_blank">样式</a>(位置，<a href="https://www.jiangweishan.com/tags/%E5%AE%9A%E4%BD%8D/" target="_blank">定位</a>点<a href="https://www.jiangweishan.com/tags/%E5%9D%90%E6%A0%87/" target="_blank">坐标</a>，大小，背景<a href="https://www.jiangweishan.com/tags/%E5%9B%BE%E7%89%87/" target="_blank">图片</a>，Z轴)，追加到文本框后面 $DIV = $('<div></div>').<a href="https://www.jiangweishan.com/tags/CSS/" target="_blank">CSS</a>('<a href="https://www.jiangweishan.com/tags/position/" target="_blank">position</a>', 'absolute').<a href="https://www.jiangweishan.com/tags/css/" target="_blank">css</a>('left', $('#test').position().left + $('#test').<a href="https://www.jiangweishan.com/tags/width/" target="_blank">width</a>() - 15 + '<a href="https://www.jiangweishan.com/tags/px/" target="_blank">px</a>').css('top', $('#test').position().top + 2 + 'px').css('background', 'trans<a href="https://www.jiangweishan.com/tags/parent/" target="_blank">parent</a><a href="https://www.jiangweishan.com/tags/url/" target="_blank">url</a>(<a href="https://www.jiangweishan.com/tags/http/" target="_blank">http</a>://<a href="https://www.jiangweishan.com/tags/www/" target="_blank">www</a>.jb51.net/up<a href="https://www.jiangweishan.com/tags/load/" target="_blank">load</a>/2010-2/20100208074636483.gif) no-repeat top left').css('<a href="https://www.jiangweishan.com/tags/height/" target="_blank">height</a>', '16px').css('width', '15px').css('z-index', '100'); $('#test').after($DIV); //定义一个下拉框层，并配置样式(位置，定位点坐标，宽度，Z轴)，先将其隐藏 $<a href="https://www.jiangweishan.com/tags/select/" target="_blank">select</a> = $('<div></div>').css('position', 'absolute').css('<a href="https://www.jiangweishan.com/tags/border/" target="_blank">border</a>', '1px solid #000000').css('left', $('#test').position().left + 'px').css ('top', $('#test').position().top + $('#test').height() + 7 + 'px').css('width', $('#test').width() + 'px').css('z-index', '100'); $('#test').after($SELECT); $SELECT.hide(); //定义五个选项层，并配置样式(宽度，Z轴一定要比下拉框层高)，添加name、<a href="https://www.jiangweishan.com/tags/value/" target="_blank">value</a>属性，加入下拉框层 for (<a href="https://www.jiangweishan.com/tags/var/" target="_blank">var</a> i = 0; i <= 5; i++) { $O<a href="https://www.jiangweishan.com/tags/pt/" target="_blank">pt</a>ION = $('<div>option' + i + '</div>').<a href="https://www.jiangweishan.com/tags/attr/" target="_blank">attr</a>('name', 'option').attr('value', 'value' + i).css('width', $SELECT.width()).css('z-index', $SELECT.css('z-index') + 1); $SELECT.<a href="https://www.jiangweishan.com/tags/append/" target="_blank">append</a>($OPTION); }; //选项层的鼠标移入移出样式 $SELECT.mou<a href="https://www.jiangweishan.com/tags/SEO/" target="_blank">SEO</a>ver(function(<a href="https://www.jiangweishan.com/tags/even/" target="_blank">even</a>t){ if ($(event.tar<a href="https://www.jiangweishan.com/tags/get/" target="_blank">get</a>).attr('name') == 'option') { //移入时背景色变深，字色变白 $(event.target).css('background-<a href="https://www.jiangweishan.com/tags/color/" target="_blank">color</a>', '#000077').css('color', 'white'); $(event.target).mou<a href="https://www.jiangweishan.com/tags/seo/" target="_blank">seo</a>ut(function(){ //移出是背景色变白，字色变黑 $(event.target).css('background-color', '#FFFFFF').css('color', '#000000'); }); } }); //鼠标进入修改背景图位置 $DIV.mouseover(function(){ $DIV.css('background-position', ' 0% -16px'); }); //鼠标移出修改背景图位置 $DIV.mouseout(function(){ $DIV.css('background-position', ' 0% -0px'); }); //鼠标按下修改背景图位置 $DIV.mousedown(function(){ $DIV.css('background-position', ' 0% -32px'); }); //鼠标释放修改背景图位置 $DIV.mouseup(function(){ $DIV.css('background-position', ' 0% -16px'); $SELECT.show(); }); //通过点击位置，<a href="https://www.jiangweishan.com/tags/%E5%88%A4%E6%96%AD/" target="_blank">判断</a>弹出的显示 $(document).mouseup(function(event){ //如果是下拉按钮层或下拉框层，则依然显示下拉框层 if (event.target == $SELECT.get(0) || event.target == $DIV.get(0)) { $SELECT.show(); } else { //如果是选项层，则<a href="https://www.jiangweishan.com/tags/%E6%94%B9%E5%8F%98/" target="_blank">改变</a>文本框的值 if ($(event.target).attr('name') == 'option') { //弹出value观察 alert($(event.target).attr('value')); $('#test').val($(event.target).<a href="https://www.jiangweishan.com/tags/html/" target="_blank">html</a>()); } //如果是其他位置，则将下拉框层 if ($SELECT.css('display') == '<a href="https://www.jiangweishan.com/tags/block/" target="_blank">block</a>') { $SELECT.hide(); } } }); }); </script></head><body><input type="text" id="test" name="test"><button type="button" onclick="alert($('#test').serialize())">提交</button> 运行后，需要刷新一下， 才可以<a href="https://www.jiangweishan.com/tags/%E5%8A%A0%E8%BD%BD/" target="_blank">加载</a><a href="https://www.jiangweishan.com/tags/JQuery/" target="_blank">JQuery</a></body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

用到的图片：