纯JS打造多选下拉框select+模糊查询功能

最新推荐文章于 2024-10-11 22:47:38 发布

刘大神仙

最新推荐文章于 2024-10-11 22:47:38 发布

阅读量1.4w

点赞数 12

分类专栏： html 文章标签： html jsp select 多选下拉框模糊查询

本文链接：https://blog.csdn.net/leq3915/article/details/81257506

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

多选下拉框功能，html本身就提供，multiple就可以了。但是这个multiple有个缺点，那就是高度和宽度是固定的，无法改变，很占用页面空间。

下面两张图，右边的是html原生的multiple，左边的是纯js完成的。

左图：缺点是麻烦，优点是节约页面空间，且附带模糊查询功能。

右图：缺点是浪费空间，优点是简单。

当然，现在很多前端框架都包含了左图的功能，简单易用。之所以会用纯js完成左图的功能，是因为同事负责的一个项目，框架很老，而且大公司对系统框架控制比较严格，不能引用新的前端框架，所以才用纯js写的。

代码不多，很简单，必要的注释都有，相信都能看得懂。有什么疑问的话可以留言哈，一起讨论。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ANSI">
<title>Insert title here</title>
</head>
<body>
<div style="width:200px;height:20px;overflow:hidden;">
	<input type="text" id="selectButton" onclick="myclick();" readonly="true" style="width:200px;height:20px;">
</div>
<div id="fuzzysearchdiv" style="display:none;width:200px;z-index:3;position:absolute;height:20px;"
		onMouseOver="mousein()" onMouseOut="mouseout()">
	<input type="text" id="fuzzysearch" onkeyup="myfuzzysearch()" style="width:185px;"/>
</div>
<div id="selectdiv" style="display:none;border:1px solid #A9A9A9;width:200px;z-index:2;position:absolute;overflow-y :scroll;height:100px;background-color:white;"
		onMouseOver="mousein()" onMouseOut="mouseout()">
	<br>

</div>
<br>
<input type="button" value="提交" onclick="mysubmit();"/>
</body>
<script type="text/javascript">
	
	//下拉框的数据，股票代码/股票名称
	var initlist = ['3001/股票1','3002/股票2','3003/股票3','3004/很长的很长的股票4','3005/最长最长最长最长最长最长的股票5','3006/test6','3007/一号#7','3008/最后一个股票-'];//
	
	//多选下拉框所在的div
	var selecteddiv = document.getElementById("selectdiv");
	
	//鼠标是否在【多选下拉框div】上面（如果在div上面，需要控制鼠标的点击事件，不让div隐藏；否则要让该div隐藏）
	var indiv = false;
	
	//模糊查询input
	var fuzzysearchinput = document.getElementById("fuzzysearch");
	
	//选中的股票代码（需要传到后台的参数）
	var selectedlist = [];
	//选中的股票名称（展示在前台给业务员看的）
	var selectednamelist = [];
	
	window.onload = function(){
		
		//动态创建所有的checkbox元素
		for(var i = 0; i < initlist.length; i++){
			var tmpdiv = document.createElement("div");
			var tmpinput = document.createElement("input");
			tmpinput.setAttribute("name","mycheckbox");
			tmpinput.setAttribute("type","checkbox");
			tmpinput.setAttribute("onclick","mycheck(this)");
			tmpinput.setAttribute("value",initlist[i].substr(0,initlist[i].indexOf("/")));
			
			var tmptext = document.createTextNode(initlist[i].substr(initlist[i].indexOf("/")+1,initlist[i].length));
			tmpdiv.appendChild(tmpinput);
			tmpdiv.appendChild(tmptext);
			selecteddiv.appendChild(tmpdiv);
		}
		
		//鼠标点击事件，如果点击在 selectedbutton，或者是在多选框div中的点击事件，不作处理。其他情况的点击事件，将多选空div隐藏
		document.onclick=function(event){
			if(event.target.id=="selectButton" || indiv){
				return;
			}
			selecteddiv.style.display="none";
			document.getElementById("fuzzysearchdiv").style.display="none";
		};
	};
	
	//点击selectButton，展示多选框
	function myclick (){
		document.getElementById("fuzzysearchdiv").style.display="block";
		selecteddiv.style.display="block";
	}
	
	//鼠标进入多选框的div【selectdiv】
	function mousein(){
		indiv = true;
	}
	
	//鼠标离开多选框的div【selectdiv】
	function  mouseout(){
		indiv = false;
	}
	
	//checkbox的点击事件
	function mycheck(obj){
		if(obj.checked){
			selectedlist.push(obj.value);
			selectednamelist.push(obj.nextSibling.nodeValue);
		}else{
			for(var i = 0; i < selectedlist.length; i++){
				if(selectedlist[i] == obj.value){
					selectedlist.splice(i,1);
					selectednamelist.splice(i,1);
				}
			}
		}
		document.getElementById("selectButton").value=selectednamelist;
	}
	
	//模糊查询
	function myfuzzysearch(){
		var checkboxlist = document.getElementsByName("mycheckbox");
		for(var i = 0; i < checkboxlist.length; i++){
			if(checkboxlist[i].nextSibling.nodeValue.indexOf(fuzzysearchinput.value) == -1){
				checkboxlist[i].parentNode.style.display = "none";
			}else{
				checkboxlist[i].parentNode.style.display = "block";
			}
		}
	}
	
	function mysubmit(){
		alert(selectedlist);
	}
</script>

</html>

下面附上模糊查询的功能示意图：