【自制】ul、li模拟select效果

最新推荐文章于 2024-07-24 20:18:42 发布

qq_19891827

最新推荐文章于 2024-07-24 20:18:42 发布

阅读量1.3w

点赞数 3

分类专栏： javascript 文章标签： javascript html select web前端前端

本文链接：https://blog.csdn.net/qq_19891827/article/details/50847314

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

利用ul、li结合javascript模拟出selec的t效果，相比较html提供的原始select标签有以下好处：

1.使下拉选择框的可控性请更高，你尽可以按你想要的样式、大小随意制作出满足你需求的下拉选择框,而不是原始那种硬邦邦又难看的select。

2.如果有对select下的option添加事件的需求，那就极力推荐使用ul、li模拟select了，因为原始select下的option对js事件的支持效果并不好，存在严重的浏览器兼容问题，而ul下的li的js事件主流浏览器都支持的。

下面是本人自制的ul、li模拟select效果的demo，时间有限代码简陋，欢迎大家批评指正，有需要的可以直接copy代码。

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