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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery14.js%22%3E%20%0D%0A%3C%2Fscript%3E"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>New Web Project</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22JavaScript%22%3E%20%0D%0A%24(document).ready(function()%7B%20%0D%0A%24('%23test').val('')%3B%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E4%B8%8B%E6%8B%89%E6%8C%89%E9%92%AE%E5%B1%82%EF%BC%8C%E5%B9%B6%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F(%E4%BD%8D%E7%BD%AE%EF%BC%8C%E5%AE%9A%E4%BD%8D%E7%82%B9%E5%9D%90%E6%A0%87%EF%BC%8C%E5%A4%A7%E5%B0%8F%EF%BC%8C%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%EF%BC%8CZ%E8%BD%B4)%EF%BC%8C%E8%BF%BD%E5%8A%A0%E5%88%B0%E6%96%87%E6%9C%AC%E6%A1%86%E5%90%8E%E9%9D%A2%20%0D%0A%24DIV%20%3D%20%24('%3Cdiv%3E%3C%2Fdiv%3E').css('position'%2C%20'absolute').css('left'%2C%20%24('%23test').position().left%20%2B%20%24('%23test').width()%20-%2015%20%2B%20'px').css('top'%2C%20%0D%0A%24('%23test').position().top%20%2B%202%20%2B%20'px').css('background'%2C%20'transparent%20url(http%3A%2F%2Fwww.glzy8.com%2Fupload%2F2010-2%2F20100208074636483.gif)%20no-repeat%20top%20left').css('height'%2C%20'16px').css('width'%2C%20%0D%0A'15px').css('z-index'%2C%20'100')%3B%20%0D%0A%24('%23test').after(%24DIV)%3B%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E4%B8%8B%E6%8B%89%E6%A1%86%E5%B1%82%EF%BC%8C%E5%B9%B6%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F(%E4%BD%8D%E7%BD%AE%EF%BC%8C%E5%AE%9A%E4%BD%8D%E7%82%B9%E5%9D%90%E6%A0%87%EF%BC%8C%E5%AE%BD%E5%BA%A6%EF%BC%8CZ%E8%BD%B4)%EF%BC%8C%E5%85%88%E5%B0%86%E5%85%B6%E9%9A%90%E8%97%8F%20%0D%0A%24SELECT%20%3D%20%24('%3Cdiv%3E%3C%2Fdiv%3E').css('position'%2C%20'absolute').css('border'%2C%20'1px%20solid%20%23000000').css('left'%2C%20%24('%23test').position().left%20%2B%20'px').css%20%0D%0A('top'%2C%20%24('%23test').position().top%20%2B%20%24('%23test').height()%20%2B%207%20%2B%20'px').css('width'%2C%20%24('%23test').width()%20%2B%20'px').css('z-index'%2C%20'100')%3B%20%0D%0A%24('%23test').after(%24SELECT)%3B%20%0D%0A%24SELECT.hide()%3B%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89%E4%BA%94%E4%B8%AA%E9%80%89%E9%A1%B9%E5%B1%82%EF%BC%8C%E5%B9%B6%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F(%E5%AE%BD%E5%BA%A6%EF%BC%8CZ%E8%BD%B4%E4%B8%80%E5%AE%9A%E8%A6%81%E6%AF%94%E4%B8%8B%E6%8B%89%E6%A1%86%E5%B1%82%E9%AB%98)%EF%BC%8C%E6%B7%BB%E5%8A%A0name%E3%80%81value%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8A%A0%E5%85%A5%E4%B8%8B%E6%8B%89%E6%A1%86%E5%B1%82%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%3D%205%3B%20i%2B%2B)%20%7B%20%0D%0A%24OPTION%20%3D%20%24('%3Cdiv%3Eoption'%20%2B%20i%20%2B%20'%3C%2Fdiv%3E').attr('name'%2C%20'option').attr('value'%2C%20'value'%20%2B%20i).css('width'%2C%20%24SELECT.width()).css('z-index'%2C%20%0D%0A%24SELECT.css('z-index')%20%2B%201)%3B%20%0D%0A%24SELECT.append(%24OPTION)%3B%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E9%80%89%E9%A1%B9%E5%B1%82%E7%9A%84%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%85%A5%E7%A7%BB%E5%87%BA%E6%A0%B7%E5%BC%8F%20%0D%0A%24SELECT.mouseover(function(event)%7B%20%0D%0Aif%20(%24(event.target).attr('name')%20%3D%3D%20'option')%20%7B%20%0D%0A%2F%2F%E7%A7%BB%E5%85%A5%E6%97%B6%E8%83%8C%E6%99%AF%E8%89%B2%E5%8F%98%E6%B7%B1%EF%BC%8C%E5%AD%97%E8%89%B2%E5%8F%98%E7%99%BD%20%0D%0A%24(event.target).css('background-color'%2C%20'%23000077').css('color'%2C%20'white')%3B%20%0D%0A%24(event.target).mouseout(function()%7B%20%0D%0A%2F%2F%E7%A7%BB%E5%87%BA%E6%98%AF%E8%83%8C%E6%99%AF%E8%89%B2%E5%8F%98%E7%99%BD%EF%BC%8C%E5%AD%97%E8%89%B2%E5%8F%98%E9%BB%91%20%0D%0A%24(event.target).css('background-color'%2C%20'%23FFFFFF').css('color'%2C%20'%23000000')%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E8%BF%9B%E5%85%A5%E4%BF%AE%E6%94%B9%E8%83%8C%E6%99%AF%E5%9B%BE%E4%BD%8D%E7%BD%AE%20%0D%0A%24DIV.mouseover(function()%7B%20%0D%0A%24DIV.css('background-position'%2C%20'%200%25%20-16px')%3B%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%87%BA%E4%BF%AE%E6%94%B9%E8%83%8C%E6%99%AF%E5%9B%BE%E4%BD%8D%E7%BD%AE%20%0D%0A%24DIV.mouseout(function()%7B%20%0D%0A%24DIV.css('background-position'%2C%20'%200%25%20-0px')%3B%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E6%8C%89%E4%B8%8B%E4%BF%AE%E6%94%B9%E8%83%8C%E6%99%AF%E5%9B%BE%E4%BD%8D%E7%BD%AE%20%0D%0A%24DIV.mousedown(function()%7B%20%0D%0A%24DIV.css('background-position'%2C%20'%200%25%20-32px')%3B%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E9%87%8A%E6%94%BE%E4%BF%AE%E6%94%B9%E8%83%8C%E6%99%AF%E5%9B%BE%E4%BD%8D%E7%BD%AE%20%0D%0A%24DIV.mouseup(function()%7B%20%0D%0A%24DIV.css('background-position'%2C%20'%200%25%20-16px')%3B%20%0D%0A%24SELECT.show()%3B%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E9%80%9A%E8%BF%87%E7%82%B9%E5%87%BB%E4%BD%8D%E7%BD%AE%EF%BC%8C%E5%88%A4%E6%96%AD%E5%BC%B9%E5%87%BA%E7%9A%84%E6%98%BE%E7%A4%BA%20%0D%0A%24(document).mouseup(function(event)%7B%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E6%98%AF%E4%B8%8B%E6%8B%89%E6%8C%89%E9%92%AE%E5%B1%82%E6%88%96%E4%B8%8B%E6%8B%89%E6%A1%86%E5%B1%82%EF%BC%8C%E5%88%99%E4%BE%9D%E7%84%B6%E6%98%BE%E7%A4%BA%E4%B8%8B%E6%8B%89%E6%A1%86%E5%B1%82%20%0D%0Aif%20(event.target%20%3D%3D%20%24SELECT.get(0)%20%7C%7C%20event.target%20%3D%3D%20%24DIV.get(0))%20%7B%20%0D%0A%24SELECT.show()%3B%20%0D%0A%7D%20%0D%0Aelse%20%7B%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E6%98%AF%E9%80%89%E9%A1%B9%E5%B1%82%EF%BC%8C%E5%88%99%E6%94%B9%E5%8F%98%E6%96%87%E6%9C%AC%E6%A1%86%E7%9A%84%E5%80%BC%20%0D%0Aif%20(%24(event.target).attr('name')%20%3D%3D%20'option')%20%7B%20%0D%0A%2F%2F%E5%BC%B9%E5%87%BAvalue%E8%A7%82%E5%AF%9F%20%0D%0Aalert(%24(event.target).attr('value'))%3B%20%0D%0A%24('%23test').val(%24(event.target).html())%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E6%98%AF%E5%85%B6%E4%BB%96%E4%BD%8D%E7%BD%AE%EF%BC%8C%E5%88%99%E5%B0%86%E4%B8%8B%E6%8B%89%E6%A1%86%E5%B1%82%20%0D%0Aif%20(%24SELECT.css('display')%20%3D%3D%20'block')%20%7B%20%0D%0A%24SELECT.hide()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<input type="text" id="test" name="test" /> 
<button type="button" onclick="alert($('#test').serialize())">提交</button> 
运行后，需要刷新一下， 才可以加载jquery
</body> 
</html>

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

　　用到的图片：

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

　　最后的效果：

　　默认/光标移出时文本框的样子：

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

　　鼠标移入时文本框的样子，当鼠标案件释放时，若光标还在div上也是这样：

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

　　鼠标按键按下时时文本框的样子：

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

　　最终效果：

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

教程首页更多教程