layui下拉框复选框实现

html:

<div class="layui-input-inline" style="width:100px;">
<select name="Field" lay-filter="Field" placeholder="选择" multiple="multiple" class="downlist">
	<option value='OnTop' selected>固顶</option>
	<option value='IsElite'>推荐</option>
	<option value='IsHot'>热门</option>
</select>
</div>

JS代码：

layui.use(['layer','jquery','form','element','util'], function(){
	 var layer = layui.layer
	,form = layui.form()
	,element = layui.element()
	,util = layui.util
	,$=layui.jquery;


	$(function(){
		//遍历渲染
		$("select.downlist").each(function(index,item) {
			var $this=$(this);
			var $select=$this.next(".layui-form-select");
			$select.addClass("downpanel");
			var $dl=$select.find("dl");
			$(".layui-select-title input",$select).val($this.attr("placeholder"));
			$dl.empty();
			var str="";
			$("option",$this).each(function() {
				str=["<dd>","<input type='checkbox' name='",$(this).val(),"' lay-skin='primary' title='",$(this).text(),"' value='true'>","</dd>"].join("");
				$dl.append(str);
			});
			form.render("checkbox");

		})
		
		$(".downpanel").on("click",".layui-select-title",function(e){
			var $select=$(this).parents(".layui-form-select");
			$(".layui-form-select").not($select).removeClass("layui-form-selected");
			$select.addClass("layui-form-selected");
			e.stopPropagation();
		}).on("click",".layui-form-checkbox",function(e){
			e.stopPropagation();
		});
	});
});

 

参考：https://fly.layui.com/jie/10090/