沃梦达 / IT编程 / 前端开发 / 正文

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

layui实现弹窗下拉搜索选择框功能,实现效果如下: 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,f

layui实现弹窗下拉搜索选择框功能,实现效果如下:


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>

本文标题为:layui实现弹窗下拉搜索选择框功能