js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		//点击输入框时候
		$(".selectBox .imitationSelect").on("click",function(event){
			$(this).parent().next().toggle();//ul弹窗展开
			$(this).next().toggleClass("fa-caret-up")//点击input选择适合，小图标动态切换
			if($(this).next().hasClass("fa-caret-down")){
				$(this).next().removeClass("fa-caret-down").addClass("fa-caret-up")//点击input选择适合，小图标动态切换
			}else{
				$(this).next().addClass("fa-caret-down").removeClass("fa-caret-up")//点击input选择适合，小图标动态切换
			}
			if (event.stopPropagation) {   
				// 针对 Mozilla 和 Opera   
				event.stopPropagation();   
			}else if (window.event) {   
				// 针对 IE   
				window.event.cancelBubble = true;   
			}  
		});
		
		//点击右边箭头icon时候
		$(".selectBox .fa").on("click",function(event){
			$(this).parent().next().toggle();//ul弹窗展开
			if($(this).hasClass("fa-caret-down")){
				$(this).removeClass("fa-caret-down").addClass("fa-caret-up")//点击input选择适合，小图标动态切换
			}else{
				$(this).addClass("fa-caret-down").removeClass("fa-caret-up")//点击input选择适合，小图标动态切换
			}
			if (event.stopPropagation) {   
				// 针对 Mozilla 和 Opera   
				event.stopPropagation();   
			}else if (window.event) {   
				// 针对 IE   
				window.event.cancelBubble = true;   
			}  
		});
		
		//定义一个存储数据的数组，用于下面重复选择判断，删除标签
		var oliIdArray = [];
		$(".selectUl li").click(function(event){
			event=event||window.event; 
			$(this).addClass("actived_li").siblings().removeClass("actived_li");//点击当前的添加。actived_li这个类；其他的移除这个类名
			var oliId = $(this).attr("oliId");
			if(oliIdArray.indexOf(oliId)>-1){
		
			}else{
				oliIdArray.push(oliId);
				$(this).parent().prev().children().attr("oliId",oliIdArray);//把当前点击的oliId赋值到显示的input的oliId里面
				$("#role_select").append("<span class='person_root'><span>"+$(this).text()+"</span><i class='close' oliId='" + oliId + "' >x</i></span>");
			}
			
			//事件委托进行绑定事件，每个删除事件得以进行
			var role_select = document.getElementById("role_select");
			var role_span= role_select.getElementsByTagName('i');
			console.log("span的选择个数"+role_span.length)
			for(var i=0;i<role_span.length;i++){  
				role_span[i].onclick = function(){  
					var oliId = $(this).attr("oliId");
					console.log("oliId"+oliId)
					for (var i = 0; i < oliIdArray.length; i++){
						if (oliIdArray[i] === oliId){ //表示数组里面有这个元素
							var id = i;//元素位置
							console.log(oliId)
							console.log(id)
							console.log(oliIdArray);   
							oliIdArray.splice(id,1);
						}
					}
					console.log(oliIdArray);  
					
					$(this).parent().remove();
				}  
			}  
		});

		//点击任意地方隐藏下拉
		$(document).click(function(event){
			event=event||window.event; 
			$(".inputCase .fa").removeClass("fa-caret-up").addClass("fa-caret-down")//当点隐藏ul弹窗时候，把小图标恢复原状
			$(".selectUl").hide();//当点击空白处，隐藏ul弹窗
		});
		
	})
	
</script>