首页layui 回显 select

layui 回显 select

时间: 2023-09-12 10:05:02 浏览: 285

在 layui 中，可以使用 form 模块的 select 组件来实现回显 select。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui 回显 Select</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <form class="layui-form" lay-filter="demo"> <div class="layui-form-item"> <label class="layui-form-label">请选择</label> <div class="layui-input-block"> <select name="select" lay-verify="required"> <option value=""></option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> </div> </div> </form> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use('form', function(){ var form = layui.form; // 模拟回显数据 var selectedValue = '2'; // 执行回显 form.val("demo", { "select": selectedValue }); // 更新渲染 form.render(); }); </script> </body> </html> ``` 在上述示例中，我们首先引入了 layui 的 CSS 和 JS 文件。然后，通过 form 模块的 select 组件创建了一个 select 元素，并设置了一些选项。在 JavaScript 部分，我们使用 `form.val()` 方法来回显 select 的值，将 `selectedValue` 变量的值设置为 select 的选中值。最后，调用 `form.render()` 方法来更新渲染。注意：示例中的回显数据是模拟的，你可以根据实际需求替换为自己的数据。

阅读全文