zoukankan
html css js c++ java
一个输入框提示列表效果
http://bbs.blueidea.com/thread-2832075-1-1.html
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
输入框提示列表效果
</
title
>
<
style
type
="text/css"
>
<!--
body
{
}
{
background
:
#fff
}
.Menu
{
}
{
position
:
relative
;
width
:
204px
;
height
:
127px
;
z-index
:
1
;
background
:
#FFF
;
border
:
1px solid #000
;
margin-top
:
-100px
;
display
:
none
;
}
.Menu2
{
}
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
auto
;
overflow
:
hidden
;
z-index
:
1
;
}
.Menu2 ul
{
}
{
margin
:
0
;
padding
:
0
}
.Menu2 ul li
{
}
{
width
:
100%
;
height
:
25px
;
line-height
:
25px
;
text-indent
:
15px
;
border-bottom
:
1px dashed #ccc
;
color
:
#666
;
cursor
:
pointer
;
change
:
expression(
this.onmouseover=function(){
this.style.background="#F2F5EF"
;
}
,
this.onmouseout=function()
{
}
{
this.style.background="";
}
)
}
input
{
}
{
width
:
200px
}
.form
{
}
{
width
:
200px
;
height
:
auto
;
}
.form div
{
}
{
position
:
relative
;
top
:
0
;
left
:
0
;
margin-bottom
:
5px
}
#List1,#List2,#List3
{
}
{
left
:
0px
;
top
:
93px
;
}
-->
</
style
>
<
script
type
="text/javascript"
>
function
showAndHide(obj,types)
{
var
Layer
=
window.document.getElementById(obj);
switch
(types)
{
case
"
show
"
:
Layer.style.display
=
"
block
"
;
break
;
case
"
hide
"
:
Layer.style.display
=
"
none
"
;
break
;
}
}
function
getValue(obj,str)
{
var
input
=
window.document.getElementById(obj);
input.value
=
str;
}
</
script
>
</
head
>
<
body
>
<
div
class
="form"
>
<
div
>
Location:
<
input
type
="text"
id
="txt"
name
="txt"
onfocus
="showAndHide('List1','show');"
onblur
="showAndHide('List1','hide');"
></
div
>
<!--
列表1
-->
<
div
class
="Menu"
id
="List1"
>
<
div
class
="Menu2"
>
<
ul
>
<
li
onmousedown
="getValue('txt','中国CHINA');showAndHide('List1','hide');"
>
中国CHINA
</
li
>
<
li
onmousedown
="getValue('txt','美国USA');showAndHide('List1','hide');"
>
美国USA
</
li
>
</
ul
>
</
div
>
</
div
>
<
div
>
Sex:
<
input
type
="text"
id
="txt2"
name
="txt2"
onfocus
="showAndHide('List2','show');"
onblur
="showAndHide('List2','hide');"
></
div
>
<!--
列表2
-->
<
div
class
="Menu"
id
="List2"
>
<
div
class
="Menu2"
>
<
ul
>
<
li
onmousedown
="getValue('txt2','男Male');showAndHide('List2','hide');"
>
男Male
</
li
>
<
li
onmousedown
="getValue('txt2','女Female');showAndHide('List2','hide');"
>
女Female
</
li
>
</
ul
>
</
div
>
</
div
>
<
div
>
education:
<
input
type
="text"
id
="txt3"
name
="txt3"
onfocus
="showAndHide('List3','show');"
onblur
="showAndHide('List3','hide');"
></
div
>
<!--
列表3
-->
<
div
class
="Menu"
id
="List3"
>
<
div
class
="Menu2"
>
<
ul
>
<
li
onmousedown
="getValue('txt3',this.innerText);showAndHide('List3','hide');"
>
大专
</
li
>
<
li
onmousedown
="getValue('txt3','本科');showAndHide('List3','hide');"
>
本科
</
li
>
<
li
onmousedown
="getValue('txt3','硕士');showAndHide('List3','hide');"
>
硕士
</
li
>
<
li
onmousedown
="getValue('txt3','本科');showAndHide('List3','hide');"
>
本科
</
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
输入框提示列表效果
Location:
中国CHINA
美国USA
Sex:
男Male
女Female
education:
大专
本科
硕士
本科
jQuery写的一个类似的:
http://www.huaxia4.com/jq/autofill.htm
查看全文
相关阅读:
Pycharm软件更换pip默认安装源为国内安装源
电商网站名词item>SKU与SPU
Linux通过端口号查看使用进程结束进程
window系统下的pycharm对虚拟机中的Ubuntu系统操作MySQL数据库
JAVA项目常用的异常处理情况总结
公文流转系统(未完成)
《程序员修炼之道》读后感(三)
Java文件操作递归遍历文件目录
Java Web初试连接数据库完成学生信息录入
JavaJFrame窗口实现新课程添加
原文地址:https://www.cnblogs.com/CB/p/1135661.html
最新文章
sharepont 添加模板和删除模板
点击按钮创建子站点.
change all DL's column display name (转)
一段SQL(自定义函数)
Android布局属性全面剖析
HTML5 Canvas 视差滚动动画
跟KingDZ学HTML5系列:文章索引
java读取 500M 以上文件,java读取大文件
HTML5 Canvas 基础API和实例
Fragment & Headers 使用
热门文章
Java 并发核心编程
stagefright与opencore对比
《Android实例剖析笔记》系列文章
基于引擎开发HTML5游戏实战
电商网站名词item>SKU与SPU
QQ第三方登录python_web开发_django框架
pycharm安装pymysql包
window系统下的pycharm对虚拟机中的Ubuntu系统操作MySQL数据库
Linux通过端口号查看使用进程结束进程
pycharm安装pymysql包
Copyright © 2011-2022 走看看