模拟select下拉实现多选

一、实现效果如下：
二、代码如下：
<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>多选</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			li {
				list-style: none;
			}
			
			#select {
				width: 300px;
				height: 40px;
				background: violet;
				position: relative;
				margin: 100px auto;
				padding-top: 10px;
				box-sizing: border-box;
			}
			
			#select:hover #list {
				display: block;
			}
			
			#list {
				width: 300px;
				height: auto;
				position: absolute;
				top: 39px;
				left: 0;
				border: 1px solid #eee;
				box-sizing: border-box;
				display: none;
			}
			
			#list li {
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				color: #333333;
				border: 1px solid #eee;
				box-sizing: border-box;
				padding-left: 10px;
			}
			
			#list li input {
				margin-right: 10px;
			}
			
			.sContent {
				display: block;
				width: 100%;
				height: 100%;
				padding-left: 10px;
			}
			
			.sContent a {
				display: block;
				float: left;
				width: 40px;
				height: 20px;
				margin-right: 5px;
				background: lawngreen;
				text-align: center;
				line-height: 20px;
				position: relative;
			}
			
			.sContent a span {
				display: block;
				position: absolute;
				top: -5px;
				right: -5px;
				background: black;
				width: 10px;
				height: 10px;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<div id="select">
			
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			var config={
				el:'#select',
				data:[1,2,3,4]
			}
			var select2={
				init:function(config){
					var el=config.el;
					var data=config.data;
					$(el).append('<div id="sContent" class="sContent">'+
								'</div>'+
								'<div id="list">'+
									'<ul>'+
									'</ul>'+
								'</div>');
					$('#list ul').html('');
					for(var i=0;i<data.length;i++){
						$('#list ul').append('<li><input type="checkbox" value="'+data[i]+'" />'+data[i]+'</li>')
					};
					$(document).on('change', '#list input', function() {
					var _this = $(this);
					var _a = $('#sContent a');
					var str=null;
					var istrue=false;
					if(_this[0].checked) {
						console.log(_this.val());
						str = '<a data-valus="' + _this.val() + '" href="javascript:void(0)">' + _this.val() + '<span></span></a>'
						console.log(_a)
						if(_a.length=='0') {
							$('#sContent').append(str);
						} else {
							for(var i = 0; i < _a.length; i++) {
								var index = i;
								if($('#sContent a').eq(index).attr('data-valus') != _this.val()) {
									istrue=true;
								}else{
									return false;
								}
							};
							if(istrue){
								$('#sContent').append(str);
							}
						}
					} else {
						if(_a.length==0) {
							return false;
						} else {
							for(var i = 0; i < _a.length; i++) {
								var index = i;
								if($('#sContent a').eq(index).attr('data-valus') == _this.val()) {
									$('#sContent a').eq(i).remove();
								}
							}
						}

					}
				});
				$(document).on('click','#sContent a span',function(e){
					var _this=$(this);
					var _text=_this.parent().attr('data-valus');
					var _input=$('#list input');
					console.log(_input)
					for(var i=0;i<_input.length;i++){
						if(_input.eq(i).val()==_text){
							_input.eq(i).removeAttr('checked');
							_this.parent().remove();
						}
					}
				});
				}
			};
			select2.init(config);
		</script>
	</body>

</html>
模拟select下拉实现多选

猜你喜欢
