原生js写的一个下拉框功能插件

关注

原创最新推荐文章于 2026-10-25 14:51:13 发布 3.5k 阅读 AI 写同款· GEO 优化 ›

js实现带复选框的多选下拉框 最近被派去做一个不使用任何框架的纯js的项目，界面属于那种机器的界面，算是中规中矩的。新特性需要用原生的js或者jq写一个可多选的下拉框，实现的方式有很多。网上常见的有一下几种： 1.下载multiple-select.js插件，由于公司使用网络的限制，下载插件不方便，而且这个最后的效果也不是我想要的，所以没有采用这种实现方法。 2.网上还有常见的 div+ul&li 的实现，这种也比较方便，不过在处理值的时候，感觉不like~，最后也没有选择这种方法。 3.使用div+定位：（根据上面方法2 阅读详情

用原生js写的一个下拉框功能插件

/**
*下单框原生js插件
* dropdown作为元素class属性的属性值作用在需要添加下拉框效果的元素上
*example:
	dropdown me
one
two
three
	
		四季
		春
		夏
		秋
		冬
	
	
**/
var dropdowns = document.getElementsByClassName("dropdown");
Array.prototype.slice.call(dropdowns,0).forEach(function(item,index){
	var dropdown = item;
	var lis = Array.prototype.slice.call(dropdown.children,0);
	lis.forEach(function(item,index){
		item.setAttribute("style","display:none");
	})
	dropdown.firstElementChild.removeAttribute("style");
	dropdown.onclick = function(){
		lis.forEach(function(item,index){
			var value = item.style.display;
			if(value=="none"){
				item.setAttribute("style","display:visibility");		
			}else{
				item.setAttribute("style","display:none");
				dropdown.firstElementChild.removeAttribute("style");
			}
		})
	}
});