首页layui的 select 用 js 追加

layui的 select 用 js 追加

时间: 2023-11-30 11:09:38 浏览: 159

您可以使用 JavaScript 来动态追加 layui 的 select 组件。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css"> </head> <body> <div class="layui-form-item"> <div class="layui-input-inline"> <select id="mySelect" lay-verify="required"> <option value=""></option> <option value="1">选项1</option> <option value="2">选项2</option> </select> </div> <div class="layui-input-inline"> <button class="layui-btn" onclick="addOption()">追加选项</button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script> <script> layui.use(['form'], function() { var form = layui.form; form.render(); }); function addOption() { var optionValue = prompt("请输入选项值:"); var optionText = prompt("请输入选项显示文本:"); if (optionValue && optionText) { var $select = $('#mySelect'); $select.append('<option value="' + optionValue + '">' + optionText + '</option>'); layui.form.render('select'); } } </script> </body> </html> ``` 在上述代码中，我们首先引入了 layui 和 jQuery 的依赖。然后，我们创建了一个包含 select 组件和一个按钮的表单项。按钮的 onclick 事件调用了 `addOption` 函数，用于追加选项。在 `addOption` 函数中，我们使用 jQuery 获取到 select 元素，并使用 `append` 方法在末尾追加一个新的 option 元素。随后，通过调用 `layui.form.render('select')` 方法，使 layui 重新渲染 select 组件，以显示新追加的选项。请注意，这只是一个简单示例，实际应用中可能需要对用户输入进行验证和处理错误情况。

阅读全文