前端设计之输入框提示列表的效果

网页代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>输入框-提示列表</title><style type="text/css"><!–/**/body{background:#CCC}.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> 国家:<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><li onmousedown="getValue('txt','日本JAPAN');showAndHide('List1','hide');">日本JAPAN</li><li onmousedown="getValue('txt','澳大利亚JAUSTRALIA');showAndHide('List1','hide');">澳大利亚JAUSTRALIA</li></ul></div></div><div> 性别:<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> 学历:<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','大专');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><li onmousedown="getValue('txt3','其他');showAndHide('List3','hide');">其他</li></ul></div> </div> <br/><div><input type="button" value="确认"/></div> </div></body></html>效果截图:

版权声明:本文为博主原创文章,未经博主允许不得转载。

,接着我们去了遇龙河,那里的水清澈见底,我把脚伸进水里,

前端设计之输入框提示列表的效果

相关文章:

你感兴趣的文章:

标签云: