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<style type="text/css">
7<!--
8body{}{background:#fff}
9.Menu {}{
10position:relative;
11width:120px;
12height:80px;
13z-index:1;
14background: #EEE;
15border:1px solid #666;
16margin-top:-100px;
17display:none;
18}
19.Menu2 {}{
20position: absolute;
21left:0;
22top:0;
23width:100%;
24height:auto;
25overflow:hidden;
26z-index:1;
27}
28.Menu2 ul{}{margin:0;padding:0}
29.Menu2 ul li{}{width:100%;height:25px;line-height:25px;text-indent:15px;
30border-bottom:1px dashed #999;color:#333;cursor:pointer;
31 change:expression(
32 this.οnmοuseοver=function(){
33 this.style.background="#f5f5f5";
34 },
35 this.οnmοuseοut=function(){}{
36 this.style.background="";
37 }
38 )
39}
40input{}{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);
60input.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
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<!--
8body{}{background:#fff}
9.Menu {}{
10position:relative;
11width:120px;
12height:80px;
13z-index:1;
14background: #EEE;
15border:1px solid #666;
16margin-top:-100px;
17display:none;
18}
19.Menu2 {}{
20position: absolute;
21left:0;
22top:0;
23width:100%;
24height:auto;
25overflow:hidden;
26z-index:1;
27}
28.Menu2 ul{}{margin:0;padding:0}
29.Menu2 ul li{}{width:100%;height:25px;line-height:25px;text-indent:15px;
30border-bottom:1px dashed #999;color:#333;cursor:pointer;
31 change:expression(
32 this.οnmοuseοver=function(){
33 this.style.background="#f5f5f5";
34 },
35 this.οnmοuseοut=function(){}{
36 this.style.background="";
37 }
38 )
39}
40input{}{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);
60input.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