前端之家收集整理的这篇文章主要介绍了
前端的那些事之layui与ajax，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
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> 原文链接：https://www.f2er.com/ajax/161507.html
