layui弹框下拉搜索

最新推荐文章于 2025-06-26 13:03:27 发布

FateBboy

最新推荐文章于 2025-06-26 13:03:27 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： JS&JQ 文章标签： javascript layui

本文链接：https://blog.youkuaiyun.com/FateBboy/article/details/71727919

JS&JQ 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何利用JavaScript和layui框架，在弹窗中实现下拉列表的搜索功能。通过创建layui的模态窗口，并结合JavaScript事件监听，实现对下拉选项的动态过滤，提供用户友好的搜索体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


    function convert(obj){ 
        var _select = ''; 
        layui.use(['form','element'], function(){ 
            var $ = layui.jquery ,form =layui.form(),element = layui.element(); 
            form.on('select(test)', function(data){ 
                _select = data.value; 
            }); 
        }); 
        layer.open({ 
            type: 1 ,
            title:'兑换流量' ,
            content:$('#convert') ,
            btn: ['兑换', '点错了'] ,
            btnAlign: 'c' //按钮居中 ,
            shade: 0 //不显示遮罩 ,
            yes: function(index){ 
                $.ajax({ 
                    url: '', 
                    data: 'ap='+_select + '&id=' + obj.getAttribute('flow-id'), 
                    type: "post", 
                    dataType: "json", 
                    success: function(result) { 
                        layer.msg(result); 
                    },  
                    error: function() { 
                        layer.msg('系统繁忙'); 
                    } 
                }) 
            } 
        });
    }

<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

<div id="convert" style="display:none;width:300px;">
    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">MIFI</label>
            <div class="layui-input-block">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" lay-filter="test" lay-search="">
                            <option value="">搜索MAC或备注</option>
                            <foreach name="data" item="v">
                                <option value="1">1GB</option>
                            </foreach>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="action-buttons"><a class="red convert" onclick="convert(this)" flow-id="'+full.id+'" href="javascript:;">兑换</a></div>