layui 下拉表格选择器

小Hier

已于 2022-03-17 17:13:29 修改

阅读量1.1k

点赞数 1

分类专栏： js 组件库文章标签： layui 前端 html

于 2022-03-10 15:27:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41965172/article/details/123402600

版权

这篇博客介绍了如何利用layui在前端实现一个点击弹出带搜索功能的表格选择器。在html页面中，通过添加特定标记并在js代码中处理搜索和选中值，实现了编辑时的下拉选项选择，并能将选中值赋值回主页面。

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

点击弹出table页面，可以搜索，话不多说直接上代码

html页面如下：

<div class="layui-form-item">
                    <label class="layui-form-label required">选择商品</label>
                    <div class="layui-input-block layuimini-upload">
                        <input  id="products_title"  class="layui-input layui-col-xs6" lay-verify="required" placeholder="请选择商品"  >
                        <input  id="demo" name="products_id" class="layui-input layui-col-xs6"  type="hidden">
                      
                        <div class="layuimini-upload-btn">
                            <span><a class="layui-btn layui-btn-normal" id="select_products_id"><i class="fa fa-list"></i> 选择</a></span>
                        </div>
                    </div>
                </div>

点击弹出的页面效果图

 //监听选中
     table.on('checkbox(transfer)', function(obj){
        var n=0;
        var checkStatus = table.checkStatus("transfer");
        n=checkStatus.data.length;
        $('.tableSelect_btn_select').find('span')