<!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');" style="list-style:none">涓浗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','鐢稭ale');showAndHide('List2','hide');">鐢稭ale</li>
<li onmousedown="getValue('txt2','濂矲emale');showAndHide('List2','hide');">濂矲emale</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><br/>
</body>
</html>
分享到：
相关推荐
此程序使用方便简单、易用灵活 ... 更新说明： 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离【以隐藏域方式提交数据】 4.支持下拉框按钮 5.支持显示结果数量 ...16.当输入框失去焦点时，提示框会自动隐藏
jquery输入框提示插件input输入框文字下拉提示添加标签代码
输入框下拉列表提示
输入框下拉提示，实时匹配输入数据.提供jquery部分代码，后台的调用的数据只要返回符合相应的json格式即可
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
jquery输入框下拉提示插件,，Select风格的下拉提示，鼠标只需点击文本框后，即可下拉出相关内容项，和搜索提示类似，基于jQuery的输入框提示功能，测试发现jQuery对这款插件的精确匹配不是太好，有时候会提示一些不...
ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax ...
用Ajax+jsp实现的输入框下拉提示。 代码比较简单。主要是为了学习用。
软件介绍 此小程序是模仿Google(sgguest)输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 ... 更新说明： 1.支持xhtml ...16.当输入框失去焦点时，提示框会自动隐藏
输入框下拉提示
JSuggest--模仿google,百度下拉提示框输入框 Ajax 兼容火狐,包含原码，本人所写，有问题QQ：13697654
ASP源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip
基于ASP的飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip
<title>jquery输入框邮箱下拉提示层 - <style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} ul,li{ list-style:none;} h1.tit-h1 { font-size:38px; text-align:center; ...
输入框下拉列表提示js onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');" function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case ...
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件，类似于百度下拉提示框
ASP输入框下拉提示数据库版，关键字加红可关闭带滚动条
JavaScript Suggest自动补全的输入框下拉提示类
jqeury实现输入框智能下拉提示，具体功能如下： 点击输入框，自动列出热门出行城市；支持中文/拼音/3字码 输入的智能提示； 支持键盘方向键选择、回车键确定；支持选择后自定义callback函数； 支持IE8 、Fire...