带下拉菜单的输入框

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2011-10-18   阅读次数: 502   查看权限: 游客查看

带下拉菜单的输入框

因工作需要,突然要求输入框带下拉菜单,说方便游客即可输入又可下拉选择。我的天,下拉框怎么可能输入,输入框怎么可能下拉?没法,人家说要就要,不管什么方法。于是我上网查了一下,大部分都是使用javascrip模拟下拉菜单。我想既然你要输入框加下拉菜单,那我就给你二合一的效果,叠起来就是!css作了IE FF的兼容:

<script>
function change(v){
  document.getElementById("name").value=v;
}
</script>
<select name="select" style="width:56px;" onchange="change(this.options[this.selectedIndex].value)">
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
</select>
<input type="text" name="name" id="name" value="00:00" maxlength="5" style="position relative;width:36px;*width:34px;margin-left:-64px;*margin-left:-60px;height:13px;*height:16px;" />

效果:

==============================这是一条美丽的分割线=============================

下面是使用JS的方法制作的,同时也解决了因浏览器不同显示效果不一样的问题。

<!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>
<title>带下拉菜单的输入框-文章中心</title>
</head>
<body>
<style>
body{
	margin:0;
	text-align:center
}
#name{
  width:70px;
  height:25px;
  padding-left:10px;
  cursor:pointer;
  text-align:left;
  border:1px solid #afccee;
  line-height:25px;
  overflow:hidden;
  background:url(http://www.scscms.com/FUploadFile/Image/2012-1/fm_sl.png) no-repeat 60px center;
}
#name_li{
  border:1px solid #afccee;
  width:80px;
  width:81px\9;
  height:100px;
  overflow:auto;
  position:absolute;
  display:none;
  padding:0;margin:0
}
#name_li li{
  list-style:none;
  font-size:12px;
  cursor:pointer;
  height:20px;line-height:20px;
  padding:0;margin:0
}
.now{
  background-color:#0099ff;
  color:#fff;
}
</style>
<script>
function $(id){
  return document.getElementById(id);
}
var b_s=false;
function clos(){
  $("name_li").style.display='none';
  b_s=false;
}
function show(obj){
  var x=obj.offsetLeft;
  var y=obj.offsetTop;
  $("name_li").style.display='block';
  $("name_li").style.left=x+'px';
  $("name_li").style.top=(y+28)+'px';   
}
function clecked(obj){
  var v=obj.innerHTML;
  $("name").value=v;
}
function leave(){
	if($('name_li').style.display=='block'){
		b_s=true;
	}
}
function op_hidden(){
	if(b_s)	clos();
}
if(document.attachEvent) document.attachEvent('onclick',op_hidden);
else if(document.addEventListener) document.addEventListener('click',op_hidden,false);
else document.onclick=op_hidden;
</script>
<div style="margin:200px auto">
  <input type="text" name="name" id="name" onmouseout="leave()" onclick="show(this)" value="00:00" maxlength="5" />  
  <ul id="name_li" onmouseout="leave()">
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">00:00</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">00:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:00</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
    <li onmousemove="this.className='now'" onmouseout="this.className=''" onclick="clecked(this)">01:30</li>
  </ul> 
</div>

</body>
</html>

相关链接新版带下拉菜单的输入框

关键词: input,输入框,下拉菜单   编辑时间: 2012-06-08

  • 感到高兴

    1

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐