前端的那些事之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://my.oschina.net/yongxinke/blog/821702

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值