自己实现一个select（涉及闭包）

最新推荐文章于 2022-07-04 12:17:17 发布

Muscle_Mliu

最新推荐文章于 2022-07-04 12:17:17 发布

阅读量1k

点赞数

分类专栏： JS中实用的小方法

本文链接：https://blog.csdn.net/liuzijiang1123/article/details/53859682

版权

前言：

写这一篇博客是因为在做自己在项目中发现ie中select里面的内容不能用text-algin居中，所以决定自己写一个原生的select，不过在写的过程中发现了很多有趣的问题，遇到了循环闭包中出现的常见错误，然后自己决定写一篇博客来记录一下。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
	.caret{
		display:inline-block;
		width:0;
		height:0;
		margin-left:2px;
		vertical-align:middle;
		border-top:6px solid;
		border-right:4px solid transparent;
		border-left:4px solid transparent;
	}
	.dropdown-menu{
		position: absolute;
		left: 214px;
		top:23px;
		z-index: 1000;
		display:none;
		min-width: 157px;
		padding:0;
		margin: -2px 0 0 0;
		list-style: none;
		background-color: #ffffff;
		border:1px solid #ccc;
		height:50px;
		overflow:auto;
	}
	.dropdown-menu a{
		outline:none;
		text-decoration:none;
		color:#313131;
	}
	.dropdown-menu li{
		text-align:center;
	}
	.dropdown-menu li:hover{
		background-color:#c4c4c4;
	}
	.mytext{
		float:left;
		height: 18px;
		text-align:center;
		background-color: #ffffff;
		color: #555555;
		border: 1px solid #cccccc;
		font-size: 14px;
		line-height:10px;
		padding-bottom:-20px;
	}
	.mybtn{
		float:left;
		height: 22px;
		border: 1px solid #cccccc;
		margin-left:-1px;
	}
	.group{
		float:right;
		display: inline-block;
		margin-left:40px;
		font-size: 0;
		white-space: nowrap;
		vertical-align: middle;
	}
	.unitdiv{
		position:relative;
		height:25px;
		border:0;
		margin-top:20px;
		right:10px;
	}
	.unitdiv label{
		float:left;
	}

	.picdiv{
		display:block;
		width:400px;
		margin-left:110px;
	}
	.pictext{
		border-bottom:2px solid #c4c4c4;
		padding:10px 0 10px 0;
	}
	</style>
</head>
<body>
	<div class="pictext">
		<span>抓图参数</span>
	</div>
	<div class="picdiv">
		<div class="unitdiv">
		  <label>图片格式:</label>
			<div class="group">
			<input type="text" id="mytext1" class="mytext" disabled="true"></input>
			<button type="button" class="mybtn"id="mybtn1" ><span class="caret"></span></button>
			</div>
			<ul class="dropdown-menu" id="menu1">
				<a href="###"><li>1</li></a>
				<a href="javascript:void(0);"><li>2</li></a>
				<a href="javascript:void(0);"><li>3</li></a>
			</ul>
		</div>

	

		<div class="unitdiv">
			<label>图片质量:</label>
			<div class="group">
			<input type="text" id="mytext2" class="mytext" disabled="true"></input>
			<button type="button" id="mybtn2" class="mybtn" ><span class="caret"></span></button>
			</div>
			<ul class="dropdown-menu" id="menu2">
				<a href="javascript:void(0);"><li>1</li></a>
				<a href="javascript:void(0);"><li>2</li></a>
				<a href="javascript:void(0);"><li>3</li></a>
			</ul>
		</div>

	
	
		<div class="unitdiv">
			<label>抓图时间间隔:</label>
			<div class="group">
			<input type="text" id="mytext3" class="mytext" disabled="true"></input>
			<button type="button" id="mybtn3" class="mybtn" ><span class="caret"></span></button>
			</div>
			<ul class="dropdown-menu" id="menu3">
				<a href="javascript:void(0);"><li>1</li></a>
				<a href="javascript:void(0);"><li>2</li></a>
				<a href="javascript:void(0);"><li>3</li></a>
			</ul>
		</div>

	

		<div class="unitdiv">
			<label>抓图数量:</label>
			<div class="group">
			<input type="text" id="mytext4" class="mytext" disabled="true"/>
			<button type="button" id="mybtn4" class="mybtn" ><span class="caret"></span></button>
			</div>
			<ul class="dropdown-menu" id="menu4">
				<a href="javascript:void(0);"><li>1</li></a>
				<a href="javascript:void(0);"><li>2</li></a>
				<a href="javascript:void(0);"><li>3</li></a>
			</ul>
		</div>
		
		
		<div class="unitdiv">
			<label>抓图数量:</label>
				<div class="group">
					<select style="width:185px" id="select_test">
						<option value="2" selected="selected">1</option>
						<option value="1" >2</option>
						<option value="3" >3</option>
					</select>
				</div>
		</div>
	</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	initselect();
})
function initselect(){

	for(var i=1;i<5;i++)
	{
			/*$("#mybtn"+i).click(function(x){
				$(".dropdown-menu").removeClass("tmCover");
				$("#menu"+i).addClass("tmCover");
				$(".dropdown-menu").not(".tmCover").hide();
				$(".tmCover").toggle();
		})*/
		$("#mybtn"+i).click(function(){
			var tmp=i;
			  return function(){
				$(".dropdown-menu").removeClass("tmCover");
				$("#menu"+tmp).addClass("tmCover");
				$(".dropdown-menu").not(".tmCover").hide();
				//$("#menu"+x).toggle();
				$(

最低0.47元/天解锁文章

Muscle_Mliu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自己实现一个select（涉及闭包）

前言：写这一篇博客是因为在做自己在项目中发现ie中select里面的内容不能用text-algin居中，所以决定自己写一个原生的select，不过在写的过程中发现了很多有趣的问题，遇到了循环闭包中出现的常见错误，然后自己决定写一篇博客来记录一下。先贴代码，如果有兴趣了解思路的可以继续往下看html: 抓图时间间隔:
复制链接

扫一扫

专栏目录