layUIselect下拉菜单

原创已于 2022-07-21 15:07:17 修改 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css #jquery

于 2022-07-21 15:00:50 首次发布

本文介绍了如何在layui框架中实现下拉菜单，特别是当需要避免使用from模块时的解决方案，提供了一种替代方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于

这样的下拉框必须加载from模块，所以改了一下layUI的另外一种下拉

.L-select-item{
	width: 100px;
	position: relative;
}
.Lselect{
	display: flex;
	justify-content: space-between;
	align-items: center;
    width: 175px;
}
.L-edge{
	border-color: transparent;
}
.L-select-item .L-edge{
	position: absolute;
	right: 10px;
	margin-top: -3px;
	top: 50%;
	border-width: 6px;
	border-top-color: #C2C2C2;
	border-style: solid;
}
.L-select-item .Linput{
	cursor: pointer;
	min-height: 100%;
}

<link rel="stylesheet" href="./layui-v2.7.2/layui/css/layui.css">
<script src="./layui-v2.7.2//layui/layui.js"></script>
<div class="Lselect">
	<label>下拉菜单：</label>
	<div class="L-select-item">
		<input type="text" id="lselect" class="layui-input Linput" readonly />
		<i class="L-edge" id="LEdge"></i>
	</div>
</div>

<script>
	layui.use('dropdown', function() {
	var dropdown = layui.dropdown
	dropdown.render({
	    //可绑定在任意元素中
		elem: '#lselect' ,
		data: [{
		title: '2秒',
		id: 1,
	    }, {
		title: '10秒',
		id: 2,
	    }, {
		title: '10分钟',
		id: 3,
	    },{
		title: '一小时',
		id: 4,
		}],
		//菜单被点击的事件，基本就是利用这个获取完选中的剩下的就是css的事情了
		click: function(obj) {
                // 这里能直接获取绑定的input
		        lselect.value = obj.title	
		    }
		});
	});
</script>