Layui 框架：如何仅动态刷新指定 form 里的 select 标签（附示例代码）

在 Layui 框架中，要只动态刷新指定 `form` 中的 `select` 标签，可以通过以下步骤实现： 1. 为需要动态刷新的 `select` 标签所在的 `form` 元素添加一个唯一的标识。 2. 通过 JavaScript 获取到指定的 `form` 以及其中的 `select` 标签。 3. 重新渲染或更新 `select` 标签的数据。以下是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css"> <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script> <title>Document</title> </head> <body> <form class="form1" id="form1"> <select name="select1" lay-filter="select1"> <option value="1">选项 1</option> <option value="2">选项 2</option> </select> </form> <form class="form2" id="form2"> <select name="select2" lay-filter="select2"> <option value="3">选项 3</option> <option value="4">选项 4</option> </select> </form> <script> layui.use(['form'], function () { var form = layui.form; // 假设要动态刷新 form1 中的 select var form1Select = document.getElementById('form1').querySelector('select[name="select1"]'); // 模拟更新数据 var newOptions = '<option value="5">选项 5</option><option value="6">选项 6</option>'; form1Select.innerHTML = newOptions; // 重新渲染 form1 中的 select form.render('select', 'select1'); }); </script> </body> </html> ``` 在上述代码中，首先获取到指定的 `form` 中的 `select` 标签，然后更新其 `innerHTML`，最后使用 `form.render('select', 'select1')` 重新渲染该 `select` 标签。其中，`select1` 是 `select` 标签的 `lay-filter` 属性值。 ######[AI写代码神器 | 593点数解答 | 2024-11-06 23:34:04]

服务商

更多选项

快捷项

自定义