带下拉菜单的输入框

【HTML基础】

下载

新闻

文章

带下拉菜单的输入框

因工作需要，突然要求输入框带下拉菜单，说方便游客即可输入又可下拉选择。我的天，下拉框怎么可能输入，输入框怎么可能下拉？没法，人家说要就要，不管什么方法。于是我上网查了一下，大部分都是使用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>

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