原生JS多选选择框，动态渲染数据添加选择框，label标题联动

1、html代码

 <div style="width:40%;height:28px;overflow:hidden;">
                                	<input type="text" id="selectButton" onclick="myclick();" readonly="true" style="width:100%;height:28px;">
                                </div>
                                <div id="fuzzysearchdiv" style="display:none;width:50%;z-index:3;position:absolute;height:20px;"
                                		onMouseOver="mousein()" onMouseOut="mouseout()">
                                	<input placeholder="过滤关键字" type="text" id="fuzzysearch" onkeyup="myfuzzysearch()" style="width:100%;"/>
                                </div>
                                <div id="selectdiv" style="margin-top:30px;display:none;border:1px solid #A9A9A9;width:50%;;z-index:2;position:absolute;overflow-y :scroll;height:180px;background-color:white;"
                                		onMouseOver="mousein()" onMouseOut="mouseout()">
                                	<br>
                                 
                                </div>
                                <br>
                                <!-- <span style="position:absolute;top:1%;left:50%" onclick="mysubmit();">提交</span> -->
                                <input style="position:absolute;top:1%;left:62%;margin-left:1%" type="button" value="提交" onclick="mysubmit();"/>
                                <input id="backButton" style="position:absolute;top:1%;left:70%;margin-left:1%" type="button" value="返回" onclick="myback();"/>

2、js代码

​
  //下拉框的数据
	// 这个数组就是存放要遍历的数据数组
    var initlist = [ 
        {code: 'A09.900', name: '胃肠炎'},
        {code: 'A09.900', name: '胃肠炎和结肠炎'}
    ];//
	
	//多选下拉框所在的div
	var selecteddiv = document.getElementById("selectdiv");
	
	//鼠标是否在【多选下拉框div】上面（如果在div上面，需要控制鼠标的点击事件，不让div隐藏；否则要让该div隐藏）
	var indiv = false;
	
	//模糊查询input
	var fuzzysearchinput = document.getElementById("fuzzysearch");
	
	//选中的股票代码（需要传到后台的参数）
	var selectedlist = [];
	//选中的股票名称（展示在前台给业务员看的）
	var selectednamelist = [];
	
	function selectDiseae(){
		console.log("多项选择开始处理",initlist);
		//动态创建所有的checkbox元素
        
		for(var i = 0; i < initlist.length; i++){
			var tmpdiv = document.createElement("div");
			var tmplable = document.createElement("label");
			var tmpinput = document.createElement("input");
			
			tmpinput.setAttribute("name","mycheckbox");
			tmpinput.setAttribute("id",initlist[i].name);
			tmpinput.setAttribute("type","checkbox");
            tmpinput.setAttribute('style', 'text-align:left;');
			tmpinput.setAttribute("onclick","mycheck(this)");
            tmplable.setAttribute("for",initlist[i].name);
			tmpinput.setAttribute("value",initlist[i].name+"/"+initlist[i].code);
            var tmptext = document.createTextNode(initlist[i].name);
			tmpdiv.appendChild(tmpinput);
			tmplable.appendChild(tmptext)
			tmpdiv.appendChild(tmplable);
			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 (){
        console.log("???!!@@");
		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){
        console.log("333333",obj);
        console.log("4444",obj.nextSibling);
        // console.log("666666",obj.nextSibling.nextSibling.nodeValue);
        console.log("5555",obj.nextSibling.innerHTML);
		if(obj.checked){
			selectedlist.push(obj.value);
			selectednamelist.push(obj.nextSibling.innerHTML);
		}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.innerHTML.indexOf(fuzzysearchinput.value) == -1){
				checkboxlist[i].parentNode.style.display = "none";
			}else{
				checkboxlist[i].parentNode.style.display = "block";
			}
		}
	}

​

3、效果图（添加了点击文字也可以进行选定的功能）

4、参考链接

纯JS打造多选下拉框select+模糊查询功能_js多选下拉框模糊查询-优快云博客