![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style type="text/css">![](https://www.cnblogs.com/Images/dot.gif)
7
<!--
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
body{
}{background:#fff}
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.Menu2 ul{
}{margin:0;padding:0}
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.onmouseout=function(){
}{
36
this.style.background="";
37
}
38
)
39
}
40![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
input{
}{width:120px}
41![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.form{
}{width:120px;height:auto;}
42![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.form div{
}{position:relative;top:0;left:0;margin-bottom:5px}
43![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#List1,#List2,#List3{
}{left:0px;top:93px;}
44
-->
45
</style>
46![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
47![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function showAndHide(obj,types)
{
48
var Layer=window.document.getElementById(obj);
49![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
101![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
posted @
2009-10-14 08:51
旭 日
阅读(
1074)
评论()
编辑
收藏
举报