JS让文本框出现下拉列表式的提示代码
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />5
<title>JS让文本框出现下拉列表式的提示代码 - www.webdm.cn</title>6
<style type="text/css">
7
<!--8
body{}{background:#fff}9
.Menu {}{10
position:relative;11
width:120px;12
height:80px;13
z-index:1;14
background: #EEE;15
border:1px solid #666;16
margin-top:-100px;17
display:none;18
}19
.Menu2 {}{20
position: absolute;21
left:0;22
top:0;23
width:100%;24
height:auto;25
overflow:hidden;26
z-index:1;27
}28
.Menu2 ul{}{margin:0;padding:0}29
.Menu2 ul li{}{width:100%;height:25px;line-height:25px;text-indent:15px;30
border-bottom:1px dashed #999;color:#333;cursor:pointer;31
change:expression(32
this.onmouseover=function(){33
this.style.background="#f5f5f5";34
},35
this.onmouseout=function(){}{36
this.style.background="";37
}38
)39
}40
input{}{width:120px}41
.form{}{width:120px;height:auto;}42
.form div{}{position:relative;top:0;left:0;margin-bottom:5px}43
#List1,#List2,#List3{}{left:0px;top:93px;}44
-->45
</style>46
<script type="text/javascript">47
function showAndHide(obj,types){48
var Layer=window.document.getElementById(obj);49
switch(types){50
case "show":51
Layer.style.display="block";52
break;53
case "hide":54
Layer.style.display="none";55
break;56
}57
}58
function getValue(obj,str){59
var input=window.document.getElementById(obj);60
input.value=str;61
}62
</script>63
</head>64
<body>65
<div class="form">66
<div> 您属于：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>67
<!--列表1-->68
<div class="Menu" id="List1">69
<div class="Menu2">70
<ul>71
<li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>72
<li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>73
</ul>74
</div>75
</div>76
<div>性别：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>77
<!--列表2-->78
<div class="Menu" id="List2">79
<div class="Menu2">80
<ul>81
<li onmousedown="getValue('txt2','男');showAndHide('List2','hide');">男</li>82
<li onmousedown="getValue('txt2','女');showAndHide('List2','hide');">女</li>83
</ul>84
</div>85
</div>86
<div>学历：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>87
<!--列表3-->88
<div class="Menu" id="List3">89
<div class="Menu2">90
<ul>91
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">专科</li>92
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>93
<li onmousedown="getValue('txt3','研究生);showAndHide('List3','hide');">研究生</li>94
</ul>95
</div>96
</div>97
</div>98
</body>99
</html>100
101
浙公网安备 33010602011771号