layui 实现弹窗层下拉搜索选择框

最新推荐文章于 2024-08-08 07:24:14 发布

涛声、依旧

最新推荐文章于 2024-08-08 07:24:14 发布

阅读量1.4k

点赞数 10

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/ChenHT12306/article/details/136649860

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细描述了如何在HTML中使用数据属性与JavaScript事件监听配合layui库，实现动态加载下拉列表并通过AJAX向服务器发送请求的过程。

摘要由CSDN通过智能技术生成

在html中：

<a class="btn ygyouhui2 btn-xs audit_btn" href="javascript:void(0);" title="通过" data-id="{$row['id']}" >通过</a>

在js中：

<script> 
   // 事件监听 
   $('.audit_btn').click(function (){
        const id = $(this).data('id')
        // 引入 layer,form组件 
        layui.use(['layer','form'], () => {
            var layer = layui.layer;

            // 拼接option
            let htmlStr = '<form class="layui-form">' +
                '<div class="layui-form-item">' +
                    '<select name="interest" lay-verify="required" lay-search="">' +
                    '<option value="">请选择</option>';
            $.each(store_list,function (key,item) {
                htmlStr += '<option value="'+key+'">'+ item +'</option>';
            })
            htmlStr += '</select>' +
                    '</div>' +
                '</form>';

            layer.open({
                title: '请选择',
                content: htmlStr,
                btn: ['通过'],
                success: function(layero, index) {
                    layui.form.render();
                    layero.find('.layui-layer-content').css('overflow', 'unset');
                } ,
                yes: function(index, layero){
                    // 获取选中的值
                    var store_id = layero.find("select").val();
                    if(store_id == ''){
                        layer.msg('请选择关联商户！')
                        return
                    }
                    // 输出选中的值
                    layer.close(index); //关闭弹层

                    var url = "请求地址";
                    var data = {};
                    data.id = id;
                    data.store_id = store_id;
                    data.op = 'adopt';

                    // ajax请求接口
                    $.ajax({
                        url: url,
                        data: data,
                        dataType: 'json',
                        success: function(data) {
                            var txt = data.msg;
                            layer.msg(txt)
                            if(data.status == 1){
                                window.location.href = data.url;
                            }
                        }
                    });
                }
            });
        })


    })
</script>

效果展示：