JS让文本框出现下拉列表式的提示代码
1
<!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号