前端的那些事之layui与ajax
发布时间:2020-12-16 03:33:14 所属栏目:百科 来源:网络整理
导读:layui结合ajax动态生成select下面的option值 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title link rel="stylesheet" href="layui/css/layui.css"/headbodyform class="layui-form" action="#" div class="layui-input-inline" sele
layui结合ajax动态生成select下面的option值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <form class="layui-form" action="#"> <div class="layui-input-inline"> <select name="quiz3" id="sel"> 动态添加select的时候,一定要加一个默认的option,不然会报错 <option></option> </select> </div> </div> <div class="layui-form-item"> <button class="layui-btn" lay-submit="demo2" lay-filter="">跳转式提交</button> <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> </div> </form> <script src="layui/layui.js"></script> <script src="jquery-2.2.4.js"></script> <script> layui.use(['form','layedit','laydate','jquery','laytpl'],function () { var form = layui.form(),layer = layui.layer,layedit = layui.layedit,$=layui.jquery,laydate = layui.laydate; //监听提交 form.on('submit(demo1)',function (data) { console.log(data.value); console.log(data.elem); $.ajax({ url: 'user.json',success: function (data) { var row; for (var i = 0; i < data.data.length; i++) { row = data.data[i]; var $row=$( '<option value="'+row.id+'">'+row.id+'</option>' + '<option value="'+row.userName+'">'+row.userName+'</option>' + '<option value="'+row.userSex+'">'+row.userSex+'</option>' + '<option value="'+row.identity+'">'+row.identity+'</option>' + '<option value="'+row.address+'">'+row.address+'</option>' ); } $("#sel").append($row); form.render('select');//一定要加form.render(); } }) }); }); </script> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容