layui下拉框复选框实现

最新推荐文章于 2025-09-11 02:15:30 发布

转载最新推荐文章于 2025-09-11 02:15:30 发布 · 9.2k 阅读

JS 专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何使用layui框架自定义一个多选的下拉框组件，通过JavaScript代码实现下拉面板的渲染和交互，包括选项的显示、选择状态的更新以及与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/