软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：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> 
<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 Web Project</title> 
<script type="text/javascript" language="JavaScript"> 
$(document).ready(function(){ 
$(#test).val(); 
//定义一个下拉按钮层，并配置样式(位置，定位点坐标，大小，背景图片，Z轴)，追加到文本框后面 
$DIV = $(<div></div>).css(position, absolute).css(left, $(#test).position().left + $(#test).width() - 15 + px).css(top, 
$(#test).position().top + 2 + px).css(background, transparent url(http://www.jb51.net/upload/2010-2/20100208074636483.gif) no-repeat top left).css(height, 16px).css(width, 
15px).css(z-index, 100); 
$(#test).after($DIV); 
//定义一个下拉框层，并配置样式(位置，定位点坐标，宽度，Z轴)，先将其隐藏 
$SELECT = $(<div></div>).css(position, absolute).css(border, 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、value属性，加入下拉框层 
for (var i = 0; i <= 5; i++) { 
$OPTION = $(<div>option + i + </div>).attr(name, option).attr(value, value + i).css(width, $SELECT.width()).css(z-index, 
$SELECT.css(z-index) + 1); 
$SELECT.append($OPTION); 
}; 
//选项层的鼠标移入移出样式 
$SELECT.mouseover(function(event){ 
if ($(event.target).attr(name) == option) { 
//移入时背景色变深，字色变白 
$(event.target).css(background-color, #000077).css(color, white); 
$(event.target).mouseout(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(); 
}); 
//通过点击位置，判断弹出的显示 
$(document).mouseup(function(event){ 
//如果是下拉按钮层或下拉框层，则依然显示下拉框层 
if (event.target == $SELECT.get(0) || event.target == $DIV.get(0)) { 
$SELECT.show(); 
} 
else { 
//如果是选项层，则改变文本框的值 
if ($(event.target).attr(name) == option) { 
//弹出value观察 
alert($(event.target).attr(value)); 
$(#test).val($(event.target).html()); 
} 
//如果是其他位置，则将下拉框层 
if ($SELECT.css(display) == block) { 
$SELECT.hide(); 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" id="test" name="test" /> 
<button type="button" onclick="alert($(#test).serialize())">提交</button> 
运行后，需要刷新一下， 才可以加载jquery
</body> 
</html>

技术文章快速查找

jQuery ul标签下拉菜单演示代码

Iframe自适应高度绝对好使的代码兼容IE,遨游，火狐

改善用户体验的五款jQuery插件分享

jQuery 1.8 Release版本发布了

JavaScript异步编程:异步数据收集的具体方法

10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)

ExtJs grid行右键菜单的两种方法

JavaScript词法作用域与调用对象深入理解

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建