<!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.当输入框失去焦点时，提示框会自动隐藏
在网页设计和开发中，"下拉选择输入框dropdownlist textbox结合"是一种常见的用户界面元素，用于提供用户友好的交互体验。它将传统的文本输入框与下拉菜单功能相结合，让用户能够在输入的同时从预设的选项中进行选择...
标题和描述提到的“jquery输入框提示插件input输入框文字下拉提示添加标签代码”是一个关于如何利用 jQuery 和相关技术实现这种功能的方法。 这个插件的主要目的是当用户在输入框中输入文字时，提供实时的下拉提示...
在网页设计和开发中，"输入框下拉列表提示"是一种常见的交互元素，它提高了用户在填写表单时的效率和体验。这种功能通常通过JavaScript（JS）实现，结合HTML和CSS来创建动态的下拉建议，以帮助用户在输入时快速选择...
在IT行业中，输入框下拉提示插件是一种常见的交互元素，广泛应用于网页表单和搜索功能，以提高用户体验。这种插件允许用户在输入时自动显示与输入内容相匹配的建议选项，通常基于预设的数据集或者通过实时查询服务器...
本项目"Ajax+jsp 输入框下拉提示"是针对输入框的一种常见功能，即当用户在输入框中输入文字时，系统自动显示下拉列表提供相关建议，提升用户体验。这种技术常用于搜索框、地址输入等场景，以减少用户输入错误和提高...
jquery输入框下拉提示插件,，Select风格的下拉提示，鼠标只需点击文本框后，即可下拉出相关内容项，和搜索提示类似，基于jQuery的输入框提示功能，测试发现jQuery对这款插件的精确匹配不是太好，有时候会提示一些不...
ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax ...
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
在网页设计和开发中，表单输入框下拉菜单是一种常见的交互元素，它极大地提高了用户在填写信息时的效率和准确性。本攻略将全面解析这种交互设计的核心概念、实现方式及最佳实践，帮助开发者和设计师更好地理解和应用...
在Web开发过程中，实现下拉选择框（select）与输入框（input）的联动是一个常见的需求。这种联动功能可以提高用户的操作效率，避免用户手动输入相同的信息，从而减少输入错误的可能性。本文将详细介绍如何使用...
软件介绍 此小程序是模仿Google(sgguest)输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 ... 更新说明： 1.支持xhtml ...16.当输入框失去焦点时，提示框会自动隐藏
下拉输入框（Dropdown EditText）在移动应用开发中是一种常见的用户界面组件，特别是在Android平台。它结合了文本输入框和下拉菜单的功能，允许用户在输入文字的同时从预定义的选项列表中选择值。这种控件提高了用户...
标题中的“仿照百度,google的输入框提示下拉列表”指的是实现类似百度和Google搜索引擎在用户输入关键词时，自动下拉显示出与输入内容相关的搜索建议功能。这种功能在网页开发中常见，能够提高用户体验，让用户快速...
**JSuggest——实现Google、百度风格的下拉提示框** 在网页开发中，为了提高用户体验，经常需要在用户输入时提供即时的建议或提示。JSuggest是一个JavaScript库，专门用于模仿Google和百度搜索框的下拉提示功能。...
【标题】"基于ASP的飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip"是一个包含ASP（Active Server Pages）技术实现的搜索输入框功能的项目，它模仿了Google的下拉提示效果，并且支持Ajax（Asynchronous ...
在IT界，输入框下拉提示是一个常见的交互设计元素，主要应用于各种Web应用和桌面软件中，为用户提供方便快捷的数据选择。这种功能通常出现在搜索框、表单填写等场景，帮助用户快速找到并选择合适的选项，提高用户...
在这个特定的场景中，标题提及的是一个ASP实现的输入框，它带有下拉提示功能，这些提示数据是从数据库中获取的。描述中提到的关键字加红，意味着当用户输入某些字符时，与之匹配的关键字在下拉提示中会被高亮显示，...
<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 ...