JS----------------建立一個具備下拉框效果的input輸入框

時間 2019-11-16

原文原文鏈接

1.建立一個具備下拉框效果的input的輸入框的思路：css

1.頁面：建立一個input輸入框，其下面有一個divhtml

2.經過js函數，點擊input的時候觸發。爲div中添加<ul><li></li></ul>列表函數

3.其中的<li></li>列表點擊的時候，爲input賦值爲<li></li>中的值ui

實例：this

<!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>xml

</head>htm

<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';

}seo