<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#ul{
margin-left:100px;
list-style:none;
width:150px;
border:1px solid #000;
display:none;
}
#ipt{
margin:10px 0 0 100px;
}
li a{
display:inline-block;
width:100%;
height:100%;
text-decoration:none;
color:#000;
}
li a:hover{
background-color:blue;
}
</style>
</head>
<body>
<input id="ipt" type="text" placeholder="点击测试"/>
<ul id="ul">
<li><a href="javascript:;">测试1</a></li>
<li><a href="javascript:;">测试2</a></li>
<li><a href="javascript:;">测试3</a></li>
<li><a href="javascript:;">测试4</a></li>
<li><a href="javascript:;">测试5</a></li>
<li><a href="javascript:;">测试6</a></li>
</ul>
<script type="text/javascript">
var ipt=document.getElementById('ipt');
var ul=document.getElementById('ul');
var lis=ul.children;
ipt.οnfοcus=function(){
ul.style.display='block';
}
ipt.οnblur=function(){
setTimeout(function(){
ul.style.display='none';
},200)
}
//模拟option点击事件
for(var i=0;i<lis.length;i++){
lis[i].οnclick=function(){
ipt.value=this.innerText;
}
}
</script>
</body>
</html>
ul、li模拟select效果
最新推荐文章于 2022-10-28 15:46:18 发布