您的位置：首页 > Web前端 > JavaScript

JS----------------创建一个具有下拉框效果的input输入框

2016-08-16 00:00 501 查看

1.创建一个具有下拉框效果的input的输入框的思路：

1.页面：创建一个input输入框，其下面有一个div

2.通过js函数，点击input的时候触发。为div中添加<ul><li></li></ul>列表

3.其中的<li></li>列表点击的时候，为input赋值为<li></li>中的值

实例：

<!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">
*{
margin:0px;
padding:0px;
font-size:14px;
}
.lis{
border-bottom:1px solid #000;
}
</style>

</head>

<body>
<div style="position:absolute; width:300px; height:100px; left:50%; margin-left:-250px; margin-top:180px; padding:60px; border:1px solid red">
<table>
<tr>
<td>
<input type="text" style="width:50px" value="0.0"; id="tInput" onfocus="setValue('block')"/>
<div id="addValue" style="width:51px; height:130px; z-index:2;position:absolute;top:82px;left:63px;"></div>
</td>
</tr>
</table>
</div>
<input type="button" id="btn" value="提交" onclick="showInputValue()"/>
<script>
function setValue(dValue,obj){
var divNode = document.getElementById("addValue");
if(dValue == "block"){
var iHtml="<ul style='list-style:none; border:1px solid #000;' onmouseout='toHander(this)'>"+
"<li class='lis' onclick =setValue('none',this)>0.5</li><li class='lis' onclick=setValue('none',this)>1.0</li><li class='lis' onclick=setValue('none',this)>1.5</li>"+
"<li class='lis'onclick=setValue('none',this)>2.0</li><li class='lis' onclick = setValue('none',this)>2.5</li><li onclick=setValue('none',this)>3.0</li></ul>";
divNode.innerHTML = iHtml;
}else{
//为控件input赋值[div中li的setValue()函数]
if(obj!=null){
var txtNode = document.getElementById("tInput");
//为text文本赋值为<li>标签中的值
txtNode.value=obj.innerHTML;
}
//隐藏div
divNode.innerHTML = "";
}
}
//设置移动上去变为收的形状
function toHander(obj){
obj.style.cursor = 'pointer';

}

//显示input的值
function showInputValue(){
var inpNode = document.getElementById("tInput");
alert(inpNode.value);
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航