layui下拉菜单怎么用
时间: 2023-09-12 19:03:12 浏览: 110
layui做的后台首页,左侧菜单树和顶部菜单树都有,只需引入layui.css和js即可
在layui中,下拉菜单可以使用下拉框组件实现。
首先,在页面中引入layui的相关文件:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
然后,在需要添加下拉菜单的位置,添加如下代码:
```html
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<select name="city" lay-verify="">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">杭州</option>
</select>
</div>
</div>
</div>
```
其中,`layui-form`、`layui-form-item`、`layui-input-inline` 都是layui的CSS类,用于控制样式。`select` 标签的 `name` 属性是必填项,`lay-verify` 属性可以设置校验规则,这里不做介绍。
最后,需要初始化layui组件:
```javascript
layui.use('form', function(){
var form = layui.form;
//执行一个layform实例
form.render();
});
```
以上就是layui下拉菜单的基本使用方法。
阅读全文